Solved

Hover not working in IE 8

Posted on 2013-06-09
12
998 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
 
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
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.

 
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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Objects on Same Line 2 18
Bootstrap on PLNKR 3 16
A simple Float not working. 5 7
execute script based on HTML event 7 13
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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)

863 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

24 Experts available now in Live!

Get 1:1 Help Now