IMG와 텍스트 링크를 동일한 장소로 링크하고 둘 다 내가 호버링하는 곳과 독립적으로 호버에서 활성화 될 수 있습니까?

StackOverflow https://stackoverflow.com/questions/1404616

  •  05-07-2019
  •  | 
  •  

문제

이미지 위에 호버링을 할 수 있기를 원합니다. 옆에있는 텍스트 링크에서 호버 속성을 호출 할 수 있습니다.

비디오의 이미지 미리보기와 옆에 텍스트 문자열로 작성된 비디오 이름이 있습니다. 나는 그것을 그림에 호버링하고 명백한 검색과 유용성 이유를 위해 이미지와 텍스트를 모두 만들지 않고도 호버 효과처럼 텍스트를 호버 효과처럼 여전히 변경할 수 있도록 만들고 싶습니다. 텍스트를 텍스트 등으로 유지

업데이트 : 또한 "Span"에있는 텍스트 링크가 "마진-왼쪽"을 사용하여 이동할 수있을뿐만 아니라 올릴 수 있는지 확인하고 싶습니다. 코드에서 기본적으로 60x60px 이미지의 하단 수준으로 떨어집니다. 나는 그것을 더 높이고 싶기 때문에 멋지게 보이지만 "마진-바닥"은 도움이되지 않습니다. 나는 60x60 IMG의 "중심 높이"에서 그것을 원한다. 그것은 기본적으로 가면 바닥에 있지 않다.

어떤 아이디어? 감사해요!

추신 : 나는 여기에 게시 된 Java Script와 jQuery 아이디어에 열려 있지만 그에 대한 완전한 초보자이며 추가 설명이 필요합니다. 나는 CSS를 선호한다.

내 코드는 이제 다음과 같습니다.

내 html은 다음과 같습니다. 

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div>

내 CSS는 다음과 같습니다.

div#example         { float:left; width:358px; height:60px; margin-top:20px; }   
div#example a       { color:#B9B9B9; width:100%;}  
div#example a:hover { color:#67a; text-decoration:none;}  
span.videotext      { margin-left:80px;}
도움이 되었습니까?

해결책

CSS 또는 JavaScript 로이 작업을 수행 할 수 있습니다. 마크 업을 알지 못하고 요소가 어떻게 배치되어 있는지, 어떤 옵션이 가장 좋은지 결정할 수 없습니다.

CSS 옵션

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

이 예에서는 링크 내에 텍스트와 이미지가 있습니다. 그런 다음 : 호버 이벤트에서 텍스트의 색상을 수정합니다.

JavaScript (jQuery)

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

이 예제는 단순히 부모 컨테이너에 클래스를 추가하는 솔루션을 보여 주며, 이는 제목의 표현을 수정합니다. 이 이벤트는 컨테이너 내에서 이미지를 호버링하여 제어됩니다.

업데이트:

텍스트를 배치하는 것이 그리 어렵지 않습니다. 빠른 방법은 상위 용기를 상대적으로 배치하고 텍스트를 절대적인 다음과 같습니다.

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

그것은 빠른 예입니다. 값을 필요에 따라 수정할 수 있습니다.

다른 팁

는 어때

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>

Jonathan의 답변을 기반으로하지만 jQuery를 사용하지 않으면 JavaScript의 경우 :

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>

내 사과. 나는 당신의 질문을 잘못 읽었습니다. 여기에 또 다른 찌르기가 있습니다.

HTML

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

분명히 여기에는 필요하지 않은 스타일이 있지만 브라우저에서 테스트하는 데 사용했습니다. 텍스트가 비디오 썸네일과 수직으로 정렬되도록하려면 줄 높이의 속성을 썸네일 이미지와 동일한 높이로 설정해야합니다. 그것은 텍스트를 비디오의 중간으로 푸시합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top