CSS：懸停圖像切換與兒童選擇器

我只使用CSS來切換圖像懸停使用子選擇器。每個圖像在包含div中顯示爲嵌入塊，從而創建圖像網格。CSS：懸停圖像切換與兒童選擇器

據工作精美，除了怪異twitch-

一個），當鼠標懸停在在內含div的第一圖像。 AND b。）當頁面滾動任何距離時，整個頁面跳回到頂部。

這個抽搐只是懸停在第一張圖片上而引起的;當鼠標在任何其他圖像之間移動時，不會發生這種情況，無論位置如何。

的作用是在這裏看到：https://jsfiddle.net/continuist/kognrzof/9/

CSS：

/* CONTAINER DIV */ 

    #rocks {width: auto;} 

/* EACH IMAGE ELEMENT */ 

    .foo img {width:30%;} 

    .foo img:first-child{display:inline-block;} 
    .foo img:last-child{display:none;} 

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

HTML：

<div id="rocks"> 
    <a class="foo" href="#"> 
     <img src="/img/item1.png"> 
     <img src="/img/item1hover2.svg"> 
    </a> 
    <a class="foo" href="#"> 
     <img src="/img/item1.png"> 
     <img src="/img/item1hover.svg"> 
    </a> 
    <a class="foo" href="#"> 
     <img src="/img/item3.png"> 
     <img src="/img/item3hover.svg"> 
    </a> 

    ... 

</div>

在照片中，這些圖像接通：懸停。但是，當頁面滾動時，鼠標懸停在頁面上的FIRST圖像（最頂端，最左邊）上時，整個頁面會跳回頂端。

來源

2017-08-27 continuist

創建一個JsFiddle。 – Muhammad

從你所包含的內容中無法分辨出來，因爲沒有什麼明顯的錯誤。小提琴或鏈接到工作網站/演示將幫助 – FluffyKitten

感謝穆罕默德和FluffyKitten。我創建了一個的jsfiddle這裏： https://jsfiddle.net/continuist/kognrzof/9/ – continuist

首先，我認爲這是您的瀏覽器問題，因爲在Firefox中，行爲是正確的。然而在Opera和Chrome中，它和你描述的一樣糟糕。

我創建了一個小提琴，這似乎是工作，但我重新創建了一些代碼更乾淨。

重大改變是，我用給定的類將IMG封裝到div中以處理懸停和尺寸效應。然後，圖像只是div寬度的100％（您也可能更希望將圖像作爲div的背景以使用封面/容器大小或更好地使用背景位置，而不是將IMG元素設置爲溢出：隱藏到divs

此外，我做了A（.foo）浮動邊距：5px和寬度/高度：calc（33vw - 15px），其中無論什麼分辨率，該行的框始終爲3你（可以再設有介質handeled查詢

/* CONTAINER DIV */ 
 

 
    #rocks {width: auto;} 
 
    
 
/* EACH IMAGE ELEMENT */ 
 

 
    .foo {width:calc(33vw - 15px); height:calc(33vw - 15px); position:relative; margin:5px 5px 0 0 ; float:left; } 
 
    .foo div img{width:100%;} 
 
    
 
    .nd{display:none;} 
 
    
 
    .foo:hover div.st{display:none;} 
 
    .foo:hover div.nd{display:block;}

<div id="rocks"> 
 
<!-- ROW 1 --> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
<!-- ROW 2 --> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
<!-- ROW 3 --> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
</div>

https://jsfiddle.net/14h4z5uw/4/

來源

2017-08-28 09:01:39 Zorak

此解決方案工作。我決定應用這個方法（刪除類中未定義的'switch'）。我非常感謝你的幫助！ – continuist

當然，很高興幫助:)只爲開關類注意。我使用元素'.foo：hover div.st {display：none;}'來定位目標，但最好使用類來代替'.foo：hover .switch.st {display：none;}'...它是的altual行爲不是問題，這兩種解決方案將工作相同，但根據經驗，如果將目標之類的東西，然後，以後，你會回來給你的項目，你添加一些其他的div元素進入結構中，ruels將適用於他們以及針對由div和這不是大多數情況下通緝的結果:) – Zorak

我不能夠解釋這種現象的原因，但我想我知道了解決您的問題。

如果您將display: inline-block添加到每個#rocks a元素，您可以解決它。由於此更改，您必須將應用於圖像的width切換到錨標記。我已經分叉你的小提琴，你可以看到它here

我希望它可以幫助你。

來源

2017-08-28 09:00:13

該解決方案還工作，以最小的改動已有的代碼（反映的方式，我的腦海結構問題）。十分感謝你的幫助！ – continuist

CSS：懸停圖像切換與兒童選擇器

回答

相關問題