如何隱藏HTML元素與CSS

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定義修改爲這些定義。然後像show一樣修改HTML。

.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作爲第二張圖像。

下面

是一個示例，我已經在這個片段

.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;}

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