Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1119
  • Last Modified:

Hover not working in IE 8

I found this "http://tympanus.net/Tutorials/OriginalHoverEffects/,    http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/"  and was able to duplicate it here..."http://www.iwebarea.net/hoverTest.htm".

The problem is that it works in all browsers except IE8.  Can someone please help in getting it to  work in IE8 or do something similar.  I'll even take a jQuery solution.  

Thanks.

Here's the CSS:
.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}




.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}




.view-first:hover img { 
    transform: scale(1.1);
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

Open in new window


Here's the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 
 
    <title>Untitled Page</title>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr-min.js"></script>
<![endif]-->
 
<style type="text/css"> 
	@import url('hoverStyle.css');
</style>
</head>
<body>
 
 
<div class="view view-first">  
    	<img alt="Year In Review" src="YearInReview.png">
	<div class="mask"> 
	<h2>Title</h2> 
	<p>Your Text</p> 
    <li><a href="#" class="info">Link 1</a> </li>
    <li><a href="#" class="info">Link 2</a> </li>
    <li><a href="#" class="info">Link 3</a> </li>
</div>  
</div>
 
</body>

Open in new window

0
Isaac
Asked:
Isaac
  • 7
  • 5
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
Don't know if it makes any difference but the page that is actually on your site is missing the second </div> near the bottom.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
It's not missing...look closely. It's there.
0
 
Dave BaldwinFixer of ProblemsCommented:
This is the code from your actual page linked above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>


    <title>Untitled Page</title>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr-min.js"></script>
<![endif]-->

<style type="text/css">
	@import url('hoverStyle.css');
</style>
</head>
<body>


<div class="view view-first">  
    	<img alt="Year In Review" src="YearInReview.png">
	<div class="mask"> 
	<h2>Title</h2> 
	<p>Your Text</p> 
    <li><a href="#" class="info">Link 1</a> </li>
    <li><a href="#" class="info">Link 2</a> </li>
    <li><a href="#" class="info">Link 3</a> </li>
</div>  


</body>
</html>

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Fixed it but that's not the problem.  Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
This page http://selectivizr.com/ says you need to have a javascript library loaded first for "selectivizr-min.js" to work.  Try this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr-min.js"></script>
<![endif]-->

<style type="text/css">
	@import url('hoverStyle.css');
</style>
</head>
<body>

<div class="view view-first">  
    	<img alt="Year In Review" src="YearInReview.png" />
	<div class="mask"> 
	<h2>Title</h2> 
	<p>Your Text</p> 
   <ul>
    <li><a href="#" class="info">Link 1</a> </li>
    <li><a href="#" class="info">Link 2</a> </li>
    <li><a href="#" class="info">Link 3</a> </li>
   </ul>
</div>  
</div>  

</body>
</html>
                                            

Open in new window

0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Unfortunately, that did not work.  It's official, IE SUCKS!

Do you know of any Image rollover solutions?  I have 7 images that will be displayed in the body of a page and when a user rolls over an image, there should be 7 or 8 links that would appear.  Any ideas?

I will also be content with a jQuery solution too.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
It needs to work in IE 8
0
 
Dave BaldwinFixer of ProblemsCommented:
If it was just images, you could use 'onmouseover' and 'onmouseout' which what you get in rollovers made in Photoshop.  I don't know if that will work for what you want.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Not really b/c I want links to appear on hover.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
I did a lot of searching today, found a solution and tweaked it to meet my needs.  Here it is:
http://www.incg.nl/blog/2008/hover-block-jquery/example/animate_hover.html

Well, the code did not work exactly how I wanted because I could not add individual links to it it so I tweaked it and came up with this:        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title>Test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
		$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block2 li').hover(function(){
				$(this).find('img').animate({left:'300px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
		});
		</script>
		<style media="screen">
					
		ul.hover_block { display: block; overflow: hidden; height: 1%; padding-bottom: 15px; }
			
		ul.hover_block li, ul.hover_block2 li {
			list-style:none;
			float:left;
			background: #fff;
			padding: 10px;
			width:300px; position: relative;
			margin-right: 20px;
                        display:block;height:150px;
 }
 
		ul.hover_block li a, ul.hover_block2 li a {
			position: relative;
			overflow: hidden;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
 
		ul.hover_block li a, ul.hover_block2 li a { text-decoration: none; }
 
		ul.hover_block li img, ul.hover_block2 li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}
		</style>
	</head>
	<body>
	<ul class="hover_block">
		summary of all 3 charts
		<li>
<a href="http://www.incg.nl/blog/2008/hover-block-jquery"> 

Chart 1</a><br/>
<a href="http://www.google.com"> Chart 2</a><br/>
<a href="http://www.yahoo.com">
 Chart 3</a>

<img src="http://www.incg.nl/blog/2008/hover-block-jquery/example/incg_hover.gif" alt="Timothy van Sas" />

</li>
	</ul>

	</body>
</html>

Open in new window


Here's what it looks like:
http://www.iwebarea.net/hoverTest2.html
0
 
Dave BaldwinFixer of ProblemsCommented:
Good for you, I think that's a good solution.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Working solution found
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now