Question

我有两张图片，但我只想展示其中一张。如果我悬停，它将改变图像。

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 100px;
  position: fixed;
  /* Stay in place */
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.8s;
  opacity: 0.8;
  box-shadow: 0px 20px 50px black;
}

.sidenav:hover {
  width: 215px;
  transition: 0.8s;
  overflow: hidden;
}

.sidenav img {
  height: 10%;
  width: auto;
  padding-left: 13px;
  transition: 0.8s;
}

.hovered {
  visibility: hidden;
  opacity: 0;
  height: 13% !important;
  transition: 0.5s;
}

.sidenav:hover img:first-child {
  visibility: hidden;
  opacity: 0;
}

.sidenav:hover .hovered {
  visibility: visible;
  opacity: 1;
}

<div class="sidenav">
  <img src="../img/10.png">
  <img src="../img/logo1.png" class="hovered">
</div>

我的问题是，如何隐藏第二个图像元素？我可以隐藏图像，但它会创建一个空白区域。我没有使用display: none;因为我使用过渡。对我有什么建议吗？

之前谢谢

Answer 1

悬停图片添加position: absolute; top: ...; left: ... 第二张图像将在第一张图像上方。您可以使用top, left参数操作定位。

Answer 2

只要可能，你应该选择CSS。并且非常符合您的要求，完全可以使用CSS。

我之前为了类似的要求做了一件事。

HTML：

<a class="foo" href="#">
  <img src="http://lorempixel.com/400/200/food/1/" />
  <img src="http://lorempixel.com/400/200/food/2/" />
</a>

CSS：

.foo img:last-child {
  display: none
}

.foo:hover img:first-child {
  display: none
}

.foo:hover img:last-child {
  display: inline-block
}

JSFiddle： http://jsfiddle.net/nikdtu/9zcvsewr/

Answer 3

如果您只需要这么小的改动，请避免jquery的开销。

将给定的CSS定义修改为这些定义。然后将HTML修改为show。

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 100px;
    position: fixed;
    /* Stay in place */
    z-index: 2;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
    transition: 0.8s;
    opacity: 0.8;
    box-shadow: 0px 20px 50px black;
}
.sidenav:hover {
    width: 215px;
    transition: 0.8s;
    overflow: hidden;
}

.sidenav .hover_image {
    height: 10%;
    width: 90px;
    padding-left: 13px;
    background-image: url('https://dummyimage.com/90x20/1b0/242499.png&text=Regular');
    background-position: left top;
    background-repeat: no-repeat;
}

.sidenav:hover .hover_image {
    height: 13% !important;
    width: 205px;
    background-image: url('https://dummyimage.com/205x28/cb0/242499.png&text=Hovered');
}

<div class="sidenav">
  <div class="hover_image">&nbsp;</div>
</div>

调整height和width以获得正确的图像尺寸并检查正确的路径是您需要做的事情。这必须是“真实的”图像大小，因为它不会被浏览器缩放。（您已经使用了预缩放的压缩图像，对吗？）

Answer 4

您可以将position:absolute用于第二张图片。

下面是一个例子，我在这个片段中使用了虚拟图像

＆＃13;

.sidenav {
        height: 100%; /* 100% Full-height */
        width: 100px;
        position: fixed; /* Stay in place */
        z-index: 2;
        top: 0;
        left: 0;
        background-color: #fff;
        overflow: hidden; /* Disable horizontal scroll */
        padding-top: 20px;
        transition: 0.8s;
        opacity: 0.8;
        box-shadow: 0px 20px 50px black;
    }
    .sidenav:hover{
       width: 215px;
       transition: 0.8s;
       overflow: hidden;
    }
    .sidenav img{
      height: 10%;
      width: auto;
      padding-left: 13px;
      transition: 0.8s;
    }
    
    .hovered {
      visibility: hidden;
      opacity: 0;
      height: 13% !important;
      transition: 0.5s;
      position:absolute;
      top:20px;
      left: 0;
    }
    
    .sidenav:hover img:first-child{visibility: hidden; opacity: 0;}
    .sidenav:hover .hovered{visibility: visible; opacity: 1;}

＆＃13;

<div class="sidenav">
       <img src="https://dummyimage.com/qvga">
       <img src="https://dummyimage.com/skyscraper/f0f/f" class="hovered">
    </div>

＆＃13;

如何使用CSS

4 个答案: