이미지에 마우스를 올리면 텍스트 표시
다음 경우 이미지의 왼쪽 하단에 하이퍼링크가 포함된 작은 상자를 표시하려고 합니다. 마우스가 그 위에 떠 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
