why is my css for span hover not working?
Question
When you move the mouse over image thumbnails, ie all images in ul .thumbs , you should see a small box which shows the text in the span embedded in the image link. This does not happen. Why and how do I fix it ?
http://jsfiddle.net/raj4dev/hbyg43d9/3/
html
<body>
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><a href="#slide-1"><img src="img/thumb1.jpg"><span>Img 1</span></a></li>
<li><a href="#slide-2"><img src="img/thumb2.jpg"><span>Img 2</span></a></li>
<li><a href="#slide-3"><img src="img/thumb3.jpg"><span>Img 3</span></a></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
<li id="slide-2"><img src="img/slide2.jpg"></li>
<li id="slide-3"><img src="img/slide3.jpg"></li>
</ul>
</div>
</body>
css
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body{
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li{
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a{
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
border: #333 solid 4px;
}
ul.slide{
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a:hover span{
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
}
3 answers
solution1
1 ACCPTED 2015-12-11 12:17:07
This is a clever approach to creating a slide show that does not require JavaScript or jQuery, rather nicely done.
There was a typo in one of your class names in the CSS and that was creating some confusion (change ul.slide to ul.slides ).
I guessed that what you wanted to do was display the span on hover, which means that to begin with, the span need to be hidden using display: none , and I added a new CSS rule for ul.thumbs li a span to correspond with ul.thumbs li a:hover span . (Note, you could also use :hover on li instead and get a similar effect.)
I also altered how the floated elements are styled. If you add overflow: auto to ul.thumbs , all the floats are contained within the parent block and you can then add the bottom margin to the parent ul instead of the li , which is more advantageous in some designs, your can decide.
For the thumbnail images, see ul.thumbs img , I set the height to 100% and let the thumbnails scale to fit the inherited height (from li ) and use vertical-align: top if you want to remove the whitespace below the images.
I also set the with on the li instead of the a , but the distinction really depends on the details of our design.
For the most part, your CSS is good as is. The only missing concept was the initial hiding of the span so that it can appear on hover.
Note: I did not pay much attention to the width of the span and its exact positioning. If you have a lot of text (like a caption), the width of 100% will not be enough (I set it that way to make it fit in the li container). You can change it as you see fit.
*{ margin: 0; padding: 0; border: none; outline: none; list-style: none; } body { background: #465c8f url(../img/bg-image.jpg) repeat-x; font-family: 'Arial', 'sans-serif'; } #container{ width: 718px; overflow: hidden; margin: 40px auto; } h1{ color: #fff; text-align: center; margin-bottom: 20px; } ul.thumbs { border: 1px dotted white; /* for demo only... */ overflow: auto; margin-bottom: 10px; } ul.thumbs li{ float: left; width: 85px; height: auto; margin-right: 9px; border: 1px dotted white; /* for demo only... */ } ul.thumbs a { display: block; position: relative; border: 4px solid transparent; font: bold 12px/25px Arial, sans-serif; color: #515151; text-decoration: none;/*remove underlines*/ text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15); } ul.thumbs img{ vertical-align: top; /* if you need to remove whitespace below image */ height: 100%; border: #333 solid 4px; } ul.slides { /* fix typo in class name */ overflow: hidden; clear: both; border: #333 solid 4px; } ul.slides, ul.slides li, ul.slides a, ul.slides img{ width: 705; height: 350px; position: relative; } ul.thumbs li a span { /* Need to provide a default styling for the span... */ position: absolute; bottom: 0px; left: 0px; display: block; width: 100%; height: auto; text-align: center; border-radius: 3px; background-color: white; display: none; } ul.thumbs li a:hover span { display: block; }
<div id="container"> <h1>css slide show</h1> <ul class="thumbs"> <li><a href="#slide-1"><img src="http://placehold.it/60x60"><span>Img 1</span></a></li> <li><a href="#slide-2"><img src="http://placehold.it/60x60"><span>Img 2</span></a></li> <li><a href="#slide-3"><img src="http://placehold.it/60x60"><span>Img 3</span></a></li> </ul> <ul class="slides"> <li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li> <li id="slide-2"><img src="http://placehold.it/180x120"></li> <li id="slide-3"><img src="http://placehold.it/120x120"></li> </ul> </div>
solution2
0 2015-12-11 01:52:29
Your hover styles work fine, but you have ul.slides on top of ul.thumbs , so the :hover action isn't being passed to your anchor.
In the future, please share the relevant pieces of code in your question on StackOverflow for posterity and searchability.
solution3
0 2015-12-11 03:27:05
Just add z-index: 2; to your ul.thumbs a css like coryward said your link is underneath something so you can't hover over it you need to bring it to the top so you can hover on it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.