Question

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

Answer 1

您可以一起使用css和javascript：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在样式表，html或javascript代码上悬停悬停操作。现在我通过CSS代码使用。我建议使用Font Awesome，线性图标，简单Lince图标，Materialise图标，SVG图像等...为您的工作提供更漂亮的图标。

CSS或via styles表悬停代码如下：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

将鼠标悬停在图像上

2 个答案: