Html 悬停以查看图像_Html_Css_Hover_Mousehover

Html 悬停以查看图像

html css

Html 悬停以查看图像,html,css,hover,mousehover,Html,Css,Hover,Mousehover,有人知道用HTML或css悬停图像的解决方案吗？我有一个社交网络图标，我想在我的网站上使用它，所以当鼠标在上面移动时，我需要更改图标的颜色如果你有主意，请帮帮我非常感谢 <!DOCTYPE html> <html> <head> <style> .socialNetIcons { background: url(newiconset4.png); height: 30.5px; width: 30.5px; float: left; marg

有人知道用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>


.社会网民{
背景：url（newiconset4.png）；
高度：30.5px；
宽度：30.5px；
浮动：左；
右边距：2px；
光标：指针；
}
a、 盘旋{
颜色：红色
}
#facebook{背景位置：0px 0px；}
#linkedin{背景位置：0px-30.5px；}
#aparat{背景位置：0px-61px；}
#instagram{背景位置：-30.5px 0px；}
#youtube{背景位置：-30.5px-30.5px；}
#雅虎{背景位置：-30.5px-61px；}
#推特{背景位置：61px 0px；}
#电报{背景位置：61px-30.5px；}
#rss{背景位置：61px-61px；}
#谷歌{背景位置：-91.5px 0px；}
#skype{背景位置：-91.5px-30.5px；}
#行为{背景位置：-91.5px-61px；}

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

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

您可以同时使用css和javascript：

div{
字体系列：Arial；
字体大小：32px；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：1.2米；
背景颜色：蓝色；
边界半径：7px；
颜色：白色；
字体大小：粗体；
}

为css中的img标记添加悬停Psuedo类。。。只需调用不透明度过滤器并根据您的喜好设置alpha

或者更好的方法是，在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">

还有一些可以添加到图像中的过滤函数

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

。筛选我{
过滤器：[]*|无
}

您可以在样式表、html或通过javascript代码执行悬停操作。现在我使用的是通过CSS代码。我建议使用令人敬畏的字体、线性图标、简单的Lince图标、物化图标、SVG图像等。。。为您的作品提供更多美丽的图标

CSS或via样式表悬停代码如下所示：

。图标{
字体大小：30px；
}
.icon社交instagram：悬停{
颜色：青绿色；
光标：指针；
}
.icon社交谷歌：悬停{
颜色：青绿色；
光标：指针；
}
.图标社交运球：悬停{
颜色：青绿色；
光标：指针；
}
.图标社交蒸汽：悬停{
颜色：青绿色；
光标：指针；
}

您能给我们看一下您的代码和您到目前为止尝试了什么吗？我添加了我的代码。请检查它。可能重复的谢谢，但我的图标是根据我的网站设计的。而且我的设计并不是以很棒的字体出现的。

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