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：悬停图像切换与儿童选择器

回答

相关问题