호버가 작동하지 않는 이유는 무엇입니까? 이 코드는 내 웹 사이트에 소셜 네트워크 아이콘을 표시하기위한 것입니다.

내 HTML 코드를보고 호버가 작동하지 않는 이유를 말해주십시오. 이 코드는 내 웹 사이트에 소셜 네트워크 아이콘을 표시하기위한 것입니다. hover {color : red;}를 사용하지만 작동하지 않습니다.호버가 작동하지 않는 이유는 무엇입니까? 이 코드는 내 웹 사이트에 소셜 네트워크 아이콘을 표시하기위한 것입니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.socialNetIcons { 
    background: url(newiconset4.png); 
    height: 30.5px; 
    width: 30.5px; 
    float: left; 
    margin-right: 2px; 
    cursor: pointer; 
} 
a:hover {color: red;} 
#facebook {background-position: 0px 0px;} 
#linkedin {background-position: 0px -30.5px;} 
#aparat {background-position: 0px -61px;} 
#instagram {background-position: -30.5px 0px;} 
#youtube {background-position: -30.5px -30.5px;} 
#yahoo {background-position: -30.5px -61px;} 
#twitter {background-position: 61px 0px;} 
#telegram {background-position: 61px -30.5px;} 
#rss {background-position: 61px -61px;} 
#google {background-position: -91.5px 0px;} 
#skype {background-position: -91.5px -30.5px;} 
#behance {background-position: -91.5px -61px;} 
</style> 
</head> 
<body> 
<div class="socialNet"> 
    <a href="http://facebook.com" target="_blank"> 
     <div class="socialNetIcons" id="facebook"></div> 
    </a> 
    <a href="http://instagram.com" target="_blank"> 
     <div class="socialNetIcons" id="instagram"></div> 
    </a> 
    <a href="http://twitter.com" target="_blank"> 
     <div class="socialNetIcons" id="twitter"></div> 
    </a> 
    <a href="http://plus.google.com" target="_blank"> 
     <div class="socialNetIcons" id="google"></div> 
    </a> 
    <a href="http://linkedin.com" target="_blank"> 
     <div class="socialNetIcons" id="linkedin"></div> 
    </a> 
    <a href="http://youtube.com" target="_blank"> 
     <div class="socialNetIcons" id="youtube"></div> 
    </a> 
    <a href="http://telegram.com" target="_blank"> 
     <div class="socialNetIcons" id="telegram"></div> 
    </a> 
    <a href="http://skype.com" target="_blank"> 
     <div class="socialNetIcons" id="skype"></div> 
    </a> 
    <a href="http://aparat.com" target="_blank"> 
     <div class="socialNetIcons" id="aparat"></div> 
    </a> 
    <a href="http:/mail.yahoo.com" target="_blank"> 
     <div class="socialNetIcons" id="yahoo"></div> 
    </a> 
    <a href="http://rss.com" target="_blank"> 
     <div class="socialNetIcons" id="rss"></div> 
    </a> 
    <a href="http://behance.net" target="_blank"> 
     <div class="socialNetIcons" id="behance"></div> 
    </a> 
</div> 
</body> 
</html>

출처

2017-05-06 shp

당신이해야

a:hover > socialNetIcons { 
    color: red 
}

대신

a:hover { 
    color: red 
}

A : 모든 텍스트를 가져하지만 그 안에 아이콘 없다.

출처

2017-05-06 08:40:51

태그 안에있는 아이콘은 이미지이므로 색상을 변경할 수 없습니다. –

아직 작동하지 않습니다! :( – shp

@shp 내가 위에서 말했듯이, 당신의 아이콘은 이미지이므로 색을 바꿀 수는 없다. –

호버가 작동하지 않는 이유는 무엇입니까? 이 코드는 내 웹 사이트에 소셜 네트워크 아이콘을 표시하기위한 것입니다.

답변

관련 문제