Home > Article > Web Front-end > How to Display Text on Mouseover of an Image Without JavaScript?

How to Display Text on Mouseover of an Image Without JavaScript?

Barbara StreisandOriginal: 2024-11-06 22:56:03876browse

Display Text on Mouseover of Image

You seek to display a small box containing a hyperlink on the bottom-left corner of an image when the mouse hovers over it. To achieve this without using JavaScript, we present two CSS solutions:

CSS3 Solution:

Using the CSS3 :hover pseudoelement:

<div>

#wrapper .text {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

#wrapper:hover .text {
    visibility: visible;
}

jQuery Solution:

<div>

#wrapper p {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

$('.hover').mouseover(function() {
    $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
    $('.text').css("visibility","hidden");
});

Remember to include the jQuery library in the HTML head:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

The above is the detailed content of How to Display Text on Mouseover of an Image Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css css3 html include using this display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Achieve Zebra Striped Tables in IE8: Can You Emulate `nth-child()`?Next article：How to Achieve Zebra Striped Tables in IE8: Can You Emulate `nth-child()`?

See more

How to Display Text on Mouseover of an Image Without JavaScript?

Related articles