html - CSS :hover image switch with child selectors

Question

我仅使用 CSS 通过子选择器在鼠标悬停时切换图像。每个图像都显示为包含 div 中的内联 block ，从而创建图像网格。

它工作得很好，除了一个奇怪的抽搐——

a.) 当鼠标悬停在包含的 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>

在照片中，这些图像中的每一个都打开了:悬停。但是当页面滚动时，鼠标悬停在页面上的第一个图像(最上面，最左边)上时，整个页面跳回顶部。

Answer 1

首先，我认为这是您的浏览器问题，因为在 firefox 中，行为是正确的。然而，在 Opera 和 Chrome 中，它就像你描述的那样糟糕。

我创建了一个 fiddle ，它似乎可以正常工作，但是我稍微重新创建了代码以使其更加简洁。

主要的变化是，我将 IMG 封装到具有给定类的 div 中以处理悬停和尺寸效果。然后图像只是 div 宽度的 100%(您可能更愿意将图像作为 div 的背景以使用封面/包含大小或更好地使用背景位置而不是将 IMG 元素定位为溢出:隐藏到div。

我还使 A (.foo) float ，边距:5px 和宽度/高度:calc(33vw - 15px)，无论你有什么分辨率，盒子总是在一行上 3(然后可以处理与媒体查询

/* 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/