Rumah > Artikel > hujung hadapan web > Bagaimana untuk Memaparkan Teks pada Tetikus Imej Tanpa JavaScript?

Bagaimana untuk Memaparkan Teks pada Tetikus Imej Tanpa JavaScript?

Barbara Streisandasal: 2024-11-06 22:56:03876semak imbas

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

Teks Paparan pada Tetikus Imej

Anda cuba untuk memaparkan kotak kecil yang mengandungi hiperpautan di sudut kiri bawah imej apabila tetikus melayang di atasnya. Untuk mencapai ini tanpa menggunakan JavaScript, kami membentangkan dua penyelesaian CSS:

Penyelesaian CSS3:

Menggunakan CSS3 :hover pseudoelement:

<div>

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

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

Penyelesaian jQuery:

<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");
});

Ingat untuk memasukkan perpustakaan jQuery dalam kepala HTML:

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

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Teks pada Tetikus Imej Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css css3 html include using this display

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mencapai Jadual Berjalur Zebra dalam IE8: Bolehkah Anda Mencontohi `nth-child()`?Artikel seterusnya：Bagaimana untuk Mencapai Jadual Berjalur Zebra dalam IE8: Bolehkah Anda Mencontohi `nth-child()`?

Artikel berkaitan

Lihat lagi