悬停图像[关闭]答案

【问题标题】：Hover for images [closed]悬停图像[关闭]
【发布时间】：2017-05-06 10:17:14
【问题描述】：

任何人都知道将图像悬停在 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>

【问题讨论】：

您能否向我们展示您的代码以及到目前为止您尝试了什么？
我添加了我的代码。请检查一下。
Changing image on hover with CSS/HTML的可能重复

标签： html css hover mousehover

【解决方案1】：

您可以使用 font awesome 来创建没有图像的社交媒体图标在你的 head 部分添加这个样式表

<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>

【讨论】：

谢谢，但我的图标是根据我的网站设计的。而且我的设计不存在很棒的字体。

【解决方案2】：

你可以同时使用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;
}

&lt;div onmouseover="this.style.backgroundColor = 'navy'" onmouseout="this.style.backgroundColor = 'blue'"&gt;f&lt;/div&gt;

【讨论】：

【解决方案3】：

在您的 css 中为您的 img 标签添加悬停 Psuedo 类... 只需调用不透明度过滤器并根据自己的喜好设置 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

还有可以添加到图片的滤镜功能。

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

CSS filter tricks

【讨论】：

【解决方案4】：

您可以在样式表、html 或通过 javascript 代码上执行悬停操作。现在我通过 CSS 代码使用。我建议使用 Font Awesome、Linear Icons、Simple Lince Icons、Materialize Icons、SVG Images 等...为您的工作制作更漂亮的图标。

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>

【讨论】：