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

Question

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

它工作得很漂亮，除了奇怪的抽搐 -

a。）当鼠标悬停在包含div中的第一个图像上时; AND b。）当页面滚动任意距离时，整个页面会跳回到顶部。

这种抽搐只能通过悬停在第一张图像上来激发;当鼠标在任何其他图像之间移动时，不会发生任何位置。

效果在此处可见：https://jsfiddle.net/continuist/kognrzof/9/

CSS：

|

HTML：

df[ ( (X) & (Y) ) | (Z) ]

在照片中，每个图像都会打开：悬停。但是当页面滚动，并且鼠标悬停在页面上的FIRST图像（最上面，最左边）上时，整个页面会跳回到顶部。

Answer 1

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

如果您为每个display: inline-block元素添加#rocks a，则可以解决该问题。 由于此更改，您必须将应用于图像的width切换为锚标记。我已经分叉了你的小提琴，你可以查看它here

我希望它可以帮到你。

Answer 2

首先，我认为这是您的浏览器问题，因为在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/