html - 如何更改悬停框中的图像
问题描述
我有我的项目的 html 代码,我想要图像的悬停效果。将鼠标悬停在框图像上的任何位置时都会更改。我尝试使用更多的类和 id,但只有在图像上悬停时才改变,而不是在盒子上。
下面是代码:
.expandable-box {
width: 20%;
height: 151px;
margin: 30px 12px 30px 0;
padding: 30px;
border: 2px solid #fff;
border-radius: 5px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.expandable-box .icon-cont {
margin: 20px auto;
display: block;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
}
.expandable-box a{
display:block;
color:#fff;
font-weight:600;
font-size:15px;
text-align: center;
position: absolute;
padding-top:35%;
width: 100%;
height:100%;
left:0;
top:0;
margin:0 auto;
z-index: 4;
}
.expandable-box a:hover{
color:#333;
}
.expandable-box:hover{
background:#fff;
}
<div class="expandable-box">
<span class="icon-cont">
<img style="display: block; margin-left: auto; margin-right:
auto;width: 64px;height:64px;" src="img.png" />
</span>
<a title="Title" href="page.html.html">This</a>
</div>
我想在框悬停时更改图像(整个框不只是图像)
谢谢
解决方案
1.使用background-image
background-image
用来span
代替使用img
标签
并将网址:hover
更改background
为您想要的图片src
.expandable-box {
width: 20%;
height: 151px;
margin: 30px 12px 30px 0;
padding: 30px;
border: 2px solid #fff;
border-radius: 5px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.expandable-box .icon-cont {
margin: 20px auto;
display: block;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
width: 64px;height:64px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(https://i.stack.imgur.com/mSXoO.png);
}
.expandable-box a{
display:block;
color:#fff;
font-weight:600;
font-size:15px;
text-align: center;
position: absolute;
padding-top:35%;
width: 100%;
height:100%;
left:0;
top:0;
margin:0 auto;
z-index: 4;
}
.expandable-box a:hover{
color:#333;
}
.expandable-box:hover span{
background-image: url(https://i.stack.imgur.com/3mG2d.jpg);
}
<div class="expandable-box" onmouse>
<span class="icon-cont">
</span>
<a title="Title" href="page.html.html">This</a>
</div>
2.img
配合JS使用onmouseenter/onmouseleave
function changeImg(){
var item=document.getElementById("imageid");
if(item.src=="https://i.stack.imgur.com/mSXoO.png")
item.src="https://i.stack.imgur.com/3mG2d.jpg";
else
item.src="https://i.stack.imgur.com/mSXoO.png";
}
.expandable-box {
width: 20%;
height: 151px;
margin: 30px 12px 30px 0;
padding: 30px;
border: 2px solid #fff;
border-radius: 5px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.expandable-box .icon-cont {
margin: 20px auto;
display: block;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
}
.expandable-box a {
display: block;
color: #fff;
font-weight: 600;
font-size: 15px;
text-align: center;
position: absolute;
padding-top: 35%;
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: 0 auto;
z-index: 4;
}
.expandable-box a:hover {
color: #333;
}
.expandable-box:hover{
background: #fff;
}
<div class="expandable-box" onmouseenter="changeImg()" onmouseleave="changeImg()">
<span class="icon-cont">
<img id="imageid" style="display: block; margin-left: auto; margin-right:auto;width: 64px;height:64px;" src="https://i.stack.imgur.com/mSXoO.png" />
</span>
<a title="Title" href="page.html.html">This</a>
</div>
推荐阅读
- java - 无法解析“myAdapter”中的方法“getContext”
- python - 如何在元素内滚动 python selenium
- javascript - ChartJS 圆环图不显示颜色
- angular - 排序数组出现错误,例如无法读取未定义的属性(读取“排序”)
- vue.js - 如何检查类型化属性在Vue中是否具有值
- json - Parse() 缺少 1 个必需的位置参数:'message
- windows-10 - Nuance Dragon 中 RememberPoint 的返回值
- python - 使用散景(pyspark 数据框)显示逐年线图的问题
- python - 烧瓶和从 HTML 中检索数据
- excel - 文本的 Excel 查找功能