Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Hover not working in IE 8

Posted on 2013-06-09
12
Medium Priority
?
1,064 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 84

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 84

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 5

Author Comment

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

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 84

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 84

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

636 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