Solved

Hover not working in IE 8

Posted on 2013-06-09
12
985 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 82

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 82

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
 
LVL 5

Author Comment

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

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 5

Author Comment

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

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 82

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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)

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now