更改 :first-of-type on :last-of-type hover答案

【问题标题】：Change :first-of-type on :last-of-type hover更改 :first-of-type on :last-of-type hover
【发布时间】：2018-02-08 23:01:18
【问题描述】：

我有两张相互堆叠的图像，我正在添加一些阴影以提供 3d 效果。我遇到的问题是，我希望first-of-type 最初有一个盒子阴影，当last-of-type 悬停时，first-of-type 上的这个阴影被删除。

然而，当first-of-type 悬停时，这个阴影会增长。我该怎么做呢？我已经尝试过兄弟选择器，但我发现你不能“上兄弟树”，所以我正在寻找一种方法来做到这一点。

还尝试了&:not(:hover):first-of-type {}之类的方法，但没有成功

CSS

&__image {
    &:hover {
       //do stuff

      //what i want to do
      if(last-child) then first-of-type box-shadow = none
    } 
}

如果两者都没有悬停，first-of-type 应该返回其初始状态（小阴影）。注意：这些组件是直接兄弟，例如

HTML

<div>
    <img...>
    <img...>
</div>

提前致谢，

【问题讨论】：

一个div里总是只有两张图片吗？

标签： html css reactjs sass

【解决方案1】：

你是对的，你不能遍历 CSS 选择器中的前一个兄弟姐妹，但你可以使用一些普通 JavaScript 通过添加事件侦听器来切换 mouse events 上的类，特别是当鼠标是当它离开给定元素时。

如果你将你的 box-shadow 包含在一个类中，这样的东西就足够了：

var firstImg = document.querySelector('.parent img:first-of-type');
var lastImg = document.querySelector('.parent img:last-of-type');

lastImg.addEventListener("mouseover", function() {
  firstImg.classList.toggle('box-shadow');
});

lastImg.addEventListener("mouseout", function() {
  firstImg.classList.toggle('box-shadow');
});

这预设了一个.box-shadow 类，该类默认应用于第一个类，但可以根据您的需要进行调整。请注意，正如所写，这也假定父级上有一个类（这里我称之为.parent），但也可以根据您的需要进行调整。

【讨论】：

如果我必须做两次这种效果，这会起作用吗？我正在使用反应，所以我有两个具有相同类名等的组件。
您可以使用.querySelectorAll 来获取匹配的父母集。这是一个示例：codepen.io/denmch/pen/7b48eaccab60c21b76d5109d042748d5

【解决方案2】：

正如您已经提到的，目前没有 CSS 选择器来更改以前的兄弟。

我认为最好的选择是为两个图像添加一个“box-shadow”类，并使用 jQuery 在悬停时切换该类。

$("#gallery img:last-of-type").hover(function() {
  $("#gallery img:first-of-type").toggleClass("box-shadow");
});

#gallery img {
  height: 120px;
  width: auto;
}

.box-shadow {
  box-shadow: 1px 1px 4px #333;
}

<div id="gallery">
  <img class="box-shadow" src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_33917052.jpg" />
  <img class="box-shadow" src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_52210298.jpg" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

奖励：

您也可以使用这种方法，它使“box-shadow”类的使用过时了，但它需要更多的 jQuery 行（让我更喜欢类解决方案）。 p>

$("#gallery img:last-of-type").hover(function() {
  $("#gallery img:first-of-type").css({
    boxShadow: "none"
  });
}, function() {
  $("#gallery img:first-of-type").css({
    boxShadow: "1px 1px 4px #333"
  });
});

【讨论】：

【解决方案3】：

仅使用 CSS 就可以做到这一点，但我不确定您的确切情况以及您尝试使用框阴影做什么。我举了一个例子，说明如何使用第一个类型选择器和最后一个类型选择器的组合来做到这一点。

带有透明边框的选择器是默认的未悬停状态。红色边框用于当项目处于活动状态时（您将在其中应用框阴影）。悬停时，我还将第一个边框增加了 1px。

	
/* initial state for the default one */
div img:first-of-type{
	border: 5px solid red;
}

/* hovered state of the first one */
div:hover img:first-of-type:hover{
	border: 6px solid red;
}

/* state of the default one when the second one is hovered */
div:hover img:first-of-type{
	border: 5px solid transparent;
}

/* initial state of the second one */
div img:last-of-type{
	border: 5px solid transparent;
}

/* state of the second one when hovered */
div img:last-of-type:hover{
	border: 5px solid red;
}


/* styles just for this example */
div{
	display: inline-block;
}
img{
display: block;
}

<div>
	<img src="https://i.imgur.com/nyljaMX.png" style="width:100px">
	<img src="https://i.imgur.com/nyljaMX.png" style="width:100px">
</div>

这是我制作的 jsfiddle 的链接：https://jsfiddle.net/jw06at5r/1/

【讨论】：