CSS와 jQuery를 사용하여 이미지 마우스 오버 시 텍스트를 표시하는 방법은 무엇입니까?

이미지에 마우스를 올리면 텍스트

마우스를 올리면 이미지에 텍스트를 표시하려고 할 때 문제가 발생하는 경우가 많습니다. 기존의 도구 설명 기술은 원하는 미적 측면이나 접근성 요구 사항에 항상 부합하지 않을 수 있습니다. 이 기사에서는 세련되고 효율적인 솔루션을 달성하기 위한 CSS 및 jQuery 기반 접근 방식에 대해 자세히 설명합니다.

CSS 접근 방식

CSS3의 :hover 의사 요소의 기능을 활용하여 우리는 JavaScript 지식 없이도 원하는 효과를 얻을 수 있습니다. HTML 구조에는 이미지와 텍스트를 모두 포함하는 래퍼 div가 필요합니다. CSS 규칙은 처음에는 visible:hidden을 사용하여 숨겨진 텍스트 요소를 이미지 아래에 배치합니다. 이미지 위로 마우스를 가져가면(class="hover") 텍스트가 표시됩니다(visibility:visible).

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

jQuery 접근법

jQuery에 능숙한 사람들을 위한 대체 방법이 있습니다. 이 접근 방식에서 jQuery는 마우스를 올리거나 놓을 때 텍스트 요소의 가시성을 제어합니다. 이벤트.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#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");
});

결론

둘 다 CSS와 jQuery는 이미지 마우스 오버 시 텍스트를 표시하기 위한 실행 가능한 솔루션을 제공합니다. 방법 선택은 개인 선호도와 기술적 숙련도에 따라 달라집니다. 개발자는 이러한 기술을 활용하여 사용자 경험을 향상하고 미학적으로 만족스러운 상호 작용을 만들 수 있습니다.