懸停圖像

任何機構都知道解決方案將圖像懸停在HTML或CSS？我有一個社交網絡的圖標，我想在我的網站上使用這個，所以我需要改變圖標的顏色，當它移動鼠標請幫助我，如果你有一個想法非常感謝懸停圖像

<!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://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> 
<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

能否請您告訴我們您的代碼，你有什麼到目前爲止已經試過？ –

我添加了我的代碼。請檢查一下。 – shp

[使用CSS/HTML更改懸停圖片]的可能重複（http：// stackoverflow。com/questions/18813299/changing-image-on-hover-with-css-html） –

你可以使用字體真棒沒有圖像創建社交媒體圖標添加這個樣式表在你的腦袋節

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

.fa { 
 
    padding: 20px; 
 
    font-size: 30px; 
 
    width: 50px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin: 5px 2px; 
 
} 
 

 

 

 
.fa-facebook:hover { 
 
    background: #3B5998; 
 
    color: white; 
 
} 
 
.fa-facebook { 
 
    background: red; 
 
    color: white; 
 
} 
 

 
.fa-twitter { 
 
    background: #55ACEE; 
 
    color: white; 
 
} 
 
.fa-twitter:hover { 
 
    background: green; 
 
    color: white; 
 
} 
 

 
.fa-google { 
 
    background: #dd4b39; 
 
    color: white; 
 
} 
 
.fa-google:hover { 
 
    background: yellow; 
 
    color: white; 
 
} 
 

 
.fa-linkedin { 
 
    background: #007bb5; 
 
    color: white; 
 
} 
 
.fa-linkedin:hover { 
 
    background: red; 
 
    color: white; 
 
} 
 

 
.fa-youtube { 
 
    background: #bb0000; 
 
    color: white; 
 
} 
 

 
.fa-instagram { 
 
    background: #125688; 
 
    color: white; 
 
} 
 

 
.fa-pinterest { 
 
    background: #cb2027; 
 
    color: white; 
 
} 
 

 
.fa-snapchat-ghost { 
 
    background: #fffc00; 
 
    color: white; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
} 
 

 
.fa-skype { 
 
    background: #00aff0; 
 
    color: white; 
 
} 
 

 
.fa-android { 
 
    background: #a4c639; 
 
    color: white; 
 
} 
 

 
.fa-dribbble { 
 
    background: #ea4c89; 
 
    color: white; 
 
} 
 

 
.fa-vimeo { 
 
    background: #45bbff; 
 
    color: white; 
 
} 
 

 
.fa-tumblr { 
 
    background: #2c4762; 
 
    color: white; 
 
} 
 

 
.fa-vine { 
 
    background: #00b489; 
 
    color: white; 
 
} 
 

 
.fa-foursquare { 
 
    background: #45bbff; 
 
    color: white; 
 
} 
 

 
.fa-stumbleupon { 
 
    background: #eb4924; 
 
    color: white; 
 
} 
 

 
.fa-flickr { 
 
    background: #f40083; 
 
    color: white; 
 
} 
 

 
.fa-yahoo { 
 
    background: #430297; 
 
    color: white; 
 
} 
 

 
.fa-soundcloud { 
 
    background: #ff5500; 
 
    color: white; 
 
} 
 

 
.fa-reddit { 
 
    background: #ff5700; 
 
    color: white; 
 
} 
 

 
.fa-rss { 
 
    background: #ff6600; 
 
    color: white; 
 
}

<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    </head> 
 
<body> 
 
    <a href="#" class="fa fa-facebook"></a> 
 
<a href="#" class="fa fa-twitter"></a> 
 
<a href="#" class="fa fa-google"></a> 
 
<a href="#" class="fa fa-linkedin"></a> 
 

 
</body>

來源

2017-05-06 10:26:22

謝謝，但我的圖標是根據我的網站設計的。而我的設計並不存在令人敬畏的字體。 – shp

您可以使用CSS和JavaScript在一起：

div{ 
 
    font-family: Arial; 
 
    font-size: 32px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 1.2em; 
 
    background-color: blue; 
 
    border-radius: 7px; 
 
    color: white; 
 
    font-weight: bold; 
 
}

<div onmouseover="this.style.backgroundColor = 'navy'" onmouseout="this.style.backgroundColor = 'blue'">f</div>

來源

2017-05-06 10:31:35 Frost

添加的僞懸停類的img標籤在你的CSS ... 的不透明度濾光器簡單地調用，設置一個alpha根據自己的喜好......

Read up on -> Hover class

Read up on -> Opacity CSS Mozilla Development

img:hover { 
    opacity: 0.5; 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
}

或者更好的是，在CSS目錄中爲懸停事件定義一個類，然後將該類添加到您的標記中。

CSS

img { 
    margin:0px 10px; 
} 
.smIcons:hover { 
    opacity: 0.5; 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
}

HTML

<img class="smIcons" src="https://image.flaticon.com/icons/svg/174/174848.svg" width="50" height="50">

Working fiddle

Updated fiddle with class

也有過濾接r功能可以添加到圖像。

.filter-me { 
    filter: <filter-function> [<filter-function>]* | none 
}

CSS filter tricks

來源

2017-05-06 10:55:22

你做的樣式表，HTML或通過JavaScript代碼懸停懸停動作。現在我通過CSS代碼使用。我建議使用字體真棒，線性圖標，簡單的圖標，物化圖標，SVG圖像等...爲您的工作更漂亮的圖標。

的CSS或通過樣式表懸停代碼下面以下幾點：

.icon{ 
 
    font-size:30px; 
 
} 
 
.icon-social-instagram:hover{ 
 
    color: teal; 
 
    cursor:pointer; 
 
} 
 
.icon-social-google:hover{ 
 
    color: teal; 
 
    cursor:pointer; 
 
} 
 
.icon-social-dribbble:hover{ 
 
    color: teal; 
 
    cursor:pointer; 
 
} 
 
.icon-social-steam:hover{ 
 
    color: teal; 
 
    cursor:pointer; 
 
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"> 
 

 
<span class="icon icon-social-instagram"></span> 
 
<span class="icon icon-social-google"></span> 
 
<span class="icon icon-social-dribbble"></span> 
 
<span class="icon icon-social-steam"></span>

來源

2017-05-07 10:19:08

回答

相關問題