JavaScript 없이 이미지에 마우스를 올리면 텍스트를 표시하는 방법은 무엇입니까?
- Barbara Streisand원래의
- 2024-11-06 22:56:03876검색
이미지에 마우스를 올리면 텍스트 표시
다음 경우 이미지의 왼쪽 하단에 하이퍼링크가 포함된 작은 상자를 표시하려고 합니다. 마우스가 그 위에 떠 있습니다. JavaScript를 사용하지 않고 이를 달성하기 위해 두 가지 CSS 솔루션을 제시합니다.
CSS3 솔루션:
CSS3 :hover 의사 요소 사용:
<div>
#wrapper .text {
position: relative;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
} 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");
});HTML 헤드에 jQuery 라이브러리를 포함하는 것을 잊지 마세요.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>위 내용은 JavaScript 없이 이미지에 마우스를 올리면 텍스트를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.