How to Display Text on Mouseover of an Image Without JavaScript?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-11-06 22:56:03

Original

956 people have browsed it

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

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>

Copy after login

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

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

Copy after login

jQuery Solution:

<div>

Copy after login

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

Copy after login

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

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

Copy after login

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>

Copy after login

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!