Display text when hovering over image
Question
I'm trying to set up text to be hidden but when you over over an image the text shows up.
<img src="img/js.png" alt="Javascript" class="skill">
<p class="exp">Text goes here</p>
This is how my HTML is setup.
Is it possible to do this in CSS or do I have to do it in Javascript?
I'd rather not use jQuery.
5 answers
solution1
3 2015-03-27 05:09:38
Simply add this css code :
.skill {
position:relative;
z-index:101;
}
.skill:hover {
z-index:99;
}
.exp{
position : absolute;
top:100px;
left:20px;
z-index:100;
}
fiddle : https://jsfiddle.net/r3gyr9oh/
solution2
3 ACCPTED 2015-03-27 05:09:58
Using the adjacent ( + ) selector , hide the text after the image and show it when the image is hovered.
Adjacent sibling selectors
This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.
In this example:
- The text is hidden with
opacity: 0 - The text is shown on hover with
opacity: 1 - The
transitionsmoothly fades the text in and out
Note: The text could also be hidden with display: none and shown with display: block , but this method cannot be transitioned.
.skill + .exp { opacity: 0; transition: opacity 1s; } .skill:hover + .exp { opacity: 1; }
<img src="http://www.placehold.it/300" alt="Javascript" class="skill"> <p class="exp">Text goes here</p>
solution3
2 2015-03-27 05:11:57
try this:
.exp{
display: none;
}
.skill:hover + .exp{
display: block;
}
solution4
0 2015-03-27 05:15:48
如果您只想避免使用任何jquery或javascript，则可以使用
<img src="img/js.png" alt="Javascript" class="skill" title="your name">
solution5
0 2015-03-27 05:18:26
What are you trying to achieve? I mean you wanted to give an expression to the user if they hover over the image you want to show something like a tooltip? if that is what you want to do than that could be done by using the tile in image tag
<!DOCTYPE html>
<html>
<body>
<img src="Your Image source" alt="Your text" width="42" height="42" title="Your text Goes here">
</body>
</html>
Hope this helps.
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.