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

이미지 호버에 텍스트 표시

사용자가 이미지 위에 마우스를 올렸을 때 나타나는 작은 상자를 만드는 방법은 다양합니다. 원하는 효과를 얻는 데 도움이 되는 포괄적인 가이드는 다음과 같습니다.

CSS3 :hover 의사 요소 사용

CSS3에서 :hover 의사 요소를 활용하면 다음과 같은 상자를 표시할 수 있습니다. 이미지 호버. 이 방법에 대한 HTML 및 CSS 코드는 다음과 같습니다.

<div>

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

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

jQuery

또는 jQuery를 사용하여 동일한 결과를 얻을 수 있습니다. HTML, CSS 및 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");
});

이 jQuery 코드는 마우스를 이미지 위로 가져가면 "텍스트" 요소를 표시하고 마우스가 떠나면 숨겨집니다.

상자 사용자 정의

상자의 크기와 위치를 사용자 정의하려면 하단: 및 왼쪽: 속성에 제공된 CSS 값을 조정할 수 있습니다. 이미지에 대한 테두리 연결을 제거하려면 CSS에 다음을 추가하세요.

#wrapper img {
  border: none;
}

여러 이미지 및 캡션

여러 이미지와 캡션이 있는 경우 각 이미지에 대한 래퍼 div를 만들고 그 안에 이미지와 텍스트 요소를 포함할 수 있습니다. 코드 조각에 표시된 형식을 복사하고 이에 따라 이미지 소스와 텍스트를 바꾸세요.

위 내용은 CSS와 jQuery를 사용하여 이미지 호버에 텍스트를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!