html - 如何更改悬停框中的图像

Question

我的元素有 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>
            

我想在框悬停时更改图像(整个框不只是图像)

谢谢

Answer 1

<强>1。使用 background-image

使用background-image 来span 而不是使用img 标签

并在 :hover 上将 background url 更改为您想要的图像的 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(/image/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(/image/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=="/image/mSXoO.png")
   item.src="/image/3mG2d.jpg";
 else 
  item.src="/image/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="/image/mSXoO.png" />				 
  </span>
  <a title="Title" href="page.html.html">This</a>
</div>