Solved

Hover not working in IE 8

Posted on 2013-06-09
12
1,002 Views
Last Modified: 2013-06-20
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
Comment
Question by:Isaac
  • 7
  • 5
12 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39233839
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
 
LVL 5

Author Comment

by:Isaac
ID: 39233874
It's not missing...look closely. It's there.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39233884
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 5

Author Comment

by:Isaac
ID: 39233909
Fixed it but that's not the problem.  Thanks!
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39233955
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
 
LVL 5

Author Comment

by:Isaac
ID: 39234813
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
 
LVL 5

Author Comment

by:Isaac
ID: 39234814
It needs to work in IE 8
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39235511
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
 
LVL 5

Author Comment

by:Isaac
ID: 39236065
Not really b/c I want links to appear on hover.
0
 
LVL 5

Accepted Solution

by:
Isaac earned 0 total points
ID: 39236748
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39237050
Good for you, I think that's a good solution.
0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 39261871
Working solution found
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 50
Jquery 10 20
Javascript Form Change 5 23
alert(innerHTML); 8 19
This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question