이미지 호버 및 링크 콤보

아래 코드로 이미지를 만들었지 만 이미지를 클릭하면 새 탭에서 열리는 링크를 추가해야합니다. 나는 다른 게시물을 통해 검색을 시도했지만 '이미지 호버'와 '링크'의 정확한 조합을 찾을 수 없습니다. 도와 줘서 고맙다.이미지 호버 및 링크 콤보

여기 호버 코드를 this? 추가 이미지 주위의 링크 같은

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
.pic{ 
     width:16px; 
     height:16px; 
     opacity: 1; 
     filter: alpha(opacity=100); 
     background: url(http://i.picresize.com/images/2014/10/12/QmCgI.png) no-repeat; 
} 
.pic:hover 
{ 
     opacity: 0.3; 
     filter: alpha(opacity=30); } 
</style> 
</head> 
<body> 
     <div class="pic"> 
     </div> 
</body> 
</html>

출처

2014-10-12 Andrew

왜 div가 아닌 를 사용 하시겠습니까? – webkit

에서 열 수있는 링크를 강제로. (새 탭에서) 이미지를 클릭을 통해 열 수있는 새로운 링크를 들어 다음과 같은 사용

<img src="your image path" onclick="window.open('https://www.google.com')"/>random text

출처

2014-10-12 13:09:31 optimus

뭔가있어, 그리고 target="blank" 속성은 CSS 클래스를 통해 호버 추가 새 탭

출처

2014-10-12 12:58:36

유레카! 고난 끝에 마침내 나는 조잡한 (올바르게 넣기 위해) 코드를 만들었다. 이전에 만든 텍스트 링크를 가져 와서 'src'에 추가 할 이미지를 추가하고 편집기에 두 HTML 코드를 추가하고 마우스 오버와 링크가 동기화 될 때까지 추가 및 제거를 시작했습니다. 다음은 누군가 다른 사람이 유용하다고 생각하거나 더 나은 것으로 만들 수 있도록하기위한 최종 코드입니다. 나는 초보자 코더 이니 꽤 흥분된다. 귀하의 답변에 모두 감사드립니다. 긴 라이브 코딩 !! :)

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
.pic{ 
     width:15px; 
     height:15px; 
     opacity: 1; 
     filter: alpha(opacity=100); 
     background: url(//i.picresize.com/images/2014/10/12/QmCgI.png) no-repeat; 
} 
.pic:hover 
{ 
     opacity: 0.3; 
     filter: alpha(opacity=30); } 
</style> 
</head> 
<body> 
     <div class="pic" 
     </div> 

<style type="text/css" media="screen" /> 
</style> 

</head> 
<body> 

<p><b><a href="myfile.htm"><img src="//i.picresize.com/images/2014/10/12/QmCgI.png"></a></b></p> 

</body> 
</html>

출처

2014-10-12 13:33:17 Andrew

이미지 호버 및 링크 콤보

답변

관련 문제