CSS 이미지 호버 링크

이미지가 있고 일련의 링크가 있습니다. 호버는 텍스트 링크에서 의도 한대로 작동하지만 이미지 위에 놓으면 크롬 및 사파리에서 이미지의 일부분 만 배경색을 변경합니다. 전체적으로는 아니지만 ... 실제로 이해하지는 못합니다. 나는 당신이 왜 이런 일을 알고있는 경우 SO에 언급 된 다른 도구 중 일부는, 아래의 코드를 보면하시기 바랍니다뿐만 아니라 jsfiddle 시도 :CSS 이미지 호버 링크

<html> 
<head> 
    <title>Welcome!</title> 
    <style type="text/css"> 
    #header { 
     background-color:#2C2C2C; 
     height:88px; 
     width:100%; 
     margin: 0px auto 0 auto; 
    } 
    #header_logo_link { 
     float: left; 
     width: 250px; 
    } 
    #header_logo_link img { 
     padding-right: 15px; 
     padding-left: 15px; 
     padding-top: 15px; 
     padding-bottom: 10px; 
     background: transparent; 
    } 
    #header_logo_link :hover { 
     background-color: #4d4d4d; 
    } 
    body, .wrapper { 
     min-height: 100%; 
     overflow: hidden; 

     margin: 0; 
     padding: 0; 
     min-height: 100%; 
    } 
    </style> 
</head> 

<body> 
    <div class="wrapper"> 
    <div id="header"> 
     <div id="header_logo_link"> 
      <a href="/"><img src="logo.png"></a> 
     </div> 
     <div id="header_logo_link"> 
      <a href="/home">Home</a> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

출처

2012-06-15 KVISH

정확히 무엇을하려고합니까? 이미지의 색상을 변경할 수 없습니까? 이미지 주변의 색상을 변경 하시겠습니까? – alecwhardy

문제는 호버가 전체 이미지를 덮지 않고 단지 일부만 덮고 있다는 것입니다. 텍스트 위에 마우스를 올리면 괜찮습니다. 이 문제는 크롬 및 사파리에서만 발생합니다. – KVISH

다음과 같은 것을 이루기 위해 노력하고 있습니까? http://jsfiddle.net/ninty9notout/n2SHh/ 그렇다면 내가 여기에서 한 것에 대해 더 설명 할 수 있습니다. – ninty9notout

난 당신이 요구하는지 정확히 모르겠지만, 만약 롤오버되었을 때 이미지 주변의 색상을 변경하려고 시도하면 a 요소에 padding을 추가하고 display : block을 추가하십시오.

<html> 
<head> 
    <title>Welcome!</title> 
    <style type="text/css"> 
    #header { 
     background-color:#2C2C2C; 
     height:88px; 
     width:100%; 
     margin: 0px auto 0 auto; 
    } 
    #header_logo_link { 
     float: left; 
     width: 250px; 
    } 
    #header_logo_link img { 
     padding-right: 15px; 
     padding-left: 15px; 
     padding-top: 15px; 
     padding-bottom: 10px; 
     background: transparent; 
    } 
    #header_logo_link :hover { 
     background-color: #4d4d4d; 
    } 
    body, .wrapper { 
     min-height: 100%; 
     overflow: hidden; 

     margin: 0; 
     padding: 0; 
     min-height: 100%; 
    } 
    a.img_rollover{ 
     padding:5px; 
     display:block; 
    } 
    a.img_rollover:hover{ 
     background-color: #00F; /*This is your new rollover color*/ 
    } 
    </style> 
</head> 

<body> 
    <div class="wrapper"> 
    <div id="header"> 
     <div id="header_logo_link" class="img_rollover"> 
      <a href="/"><img src="logo.png"></a> 
     </div> 
     <div id="header_logo_link"> 
      <a href="/home">Home</a> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

출처

2012-06-15 23:25:48 alecwhardy

죄송합니다. 동일한 문제가 발생했습니다. 호버 배경이 바뀌면서 이미지가 완전히 덮히지 않습니다. – KVISH

정확한지, 위의 코드는 전체 이미지를 다루지 않습니다. 이미지를 덮는 div를 생성하고, 이미지를 기준으로 배치하고, 롤 오버 할 때 표시하고, 표시하지 않을 때 숨길 수 있습니다. – alecwhardy

CSS 이미지 호버 링크

답변

관련 문제