도구 설명을 사용하지 않고 이미지 호버에 텍스트를 표시하려면 어떻게 해야 합니까?

도구 설명 없이 이미지를 가리키면 텍스트 표시

웹 디자인에서는 사용자가 이미지 위로 마우스를 가져갈 때 추가 정보를 표시하는 것이 바람직한 경우가 많습니다. 도구 설명은 널리 사용되는 솔루션이지만 원하는 미적 특성이나 기능을 항상 제공하는 것은 아닙니다. 이 기사에서는 순수 CSS 또는 jQuery를 사용하여 이 효과를 얻는 방법을 살펴봅니다.

CSS 사용:

CSS3에는 마우스를 가리키면 스타일을 지정할 수 있는 :hover 의사 요소가 도입되었습니다. 요소 위에. 이 경우 이미지에 호버 효과가 적용됩니다.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

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

이 CSS는 이미지의 왼쪽 하단에 텍스트 캡션을 배치하고 마우스가 이미지 위로 이동할 때까지 숨깁니다.

jQuery 사용:

jQuery를 사용하여 동일한 효과를 얻을 수도 있습니다. 이 방법은 더 복잡한 시나리오에 더 많은 유연성을 제공할 수 있습니다.

HTML:

이전과 동일합니다.

CSS:

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

jQuery:

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

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

이 jQuery 스크립트는 마우스오버 및 마우스아웃 이벤트를 이미지 요소에 바인딩하고 캡션 표시 여부를 전환합니다.

사용 방법에 관계없이 CSS나 jQuery를 활용하면 툴팁을 사용하지 않고도 이미지에 추가 정보를 표시하는 사용자 정의 호버 효과를 만들 수 있습니다.