CSS：带有子选择器的悬停图像开关

Question

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

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

a.) 当鼠标悬停在包含 div 中的 first 图像上时； 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>

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

Answer 1

我无法解释这种行为的原因，但我想我知道您的问题的解决方案。

如果您将display: inline-block 添加到每个#rocks a 元素，您可以解决它。 由于此更改，您必须将应用于图像的width 切换到锚标记。我已经 fork 你的 Fiddle，你可以查看它here

希望对你有帮助。

Answer 2

首先，我认为这是您的浏览器问题，因为在 Firefox 中，行为是正确的。但是在 Opera 和 Chrome 中，它和你描述的一样糟糕。

我创建了一个小提琴，它似乎可以正常工作，但是我重新创建了代码以更简洁。

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

我还让 A (.foo) 浮动，边距：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/