我有 div,div 内部是“Font Awesome”中的图标。它是白色背景圆圈和内部圆圈黄色图标。在悬停圆圈上将背景颜色更改为黄色,其中的图标将颜色更改为白色。
现在我需要更改不在“Font awesome”库中的图标图片,并且需要使其保持在中心位置并在悬停主 div 时更改颜色。
这是我的解决方案,但效果不佳
.imgBox {
margin-left: 30%;
width: 191px;
height: 191px;
background: url(../images/greenhouse.png) no-repeat;
}
.imgBox:hover {
width: 191px;
height: 191px;
background: url(../images/greenhouse2.png) no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-4 services-icon" onclick="parnik()">
<div class="services-icon-info">
<div class="imgBox"></div>
</div>
<div class="services-icon-text">
<h4>Парники </h4>
</div>
</div>
</div>
类“服务图标信息”的 CSS
.services-icon-info {
width: 80px;
height: 80px;
background: #FFFFFF;
text-align: center;
color: #FFC107;
font-size: 2em;
padding: .6em 0 0 0;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
margin: 0 auto;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.services-icon:hover div.services-icon-info {
background: #FFC107;
color: #FFFFFF;
}
最佳答案
一种方法是使用透明的 PNG 图像
.image-icon{
background-color:#fff;
border-radius:100px; // to make it circle
margin:0 auto; // to align it in center of container
width:191px;
height:191px;
background: url(../images/greenhouse-white.png) no-repeat center center; // white image icon
}
.image-icon:hover{
background-color:#f90; // orange background color
background-image: url(../images/greenhouse-orange.png); // orange image icon;
}
HTML 可以看起来像您已有的
<div class="services-icon-info">
<div class="imgBox"></div>
<h3>Title of box</h3>
</div>
请在此处查看实际效果: https://codepen.io/FaridNaderi/pen/PjVoOM
希望对你有帮助。
关于javascript - 悬停时更改 div 内的图片(带边框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45066697/