Question

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

然而，当first-of-type被徘徊时，这个阴影就会增长。我该怎么做呢？我已经尝试过兄弟选择器，但我发现你不能去兄弟树＆＃34;所以我正在寻找一种方法来做到这一点。

还试过类似&: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>

提前感谢，

Answer 1

你是对的，你不能在CSS选择器中追溯到以前的兄弟姐妹，但你可以通过添加事件监听器来切换mouse events上的一个类，通过一些普通的JavaScript来实现这一点，特别是当鼠标结束，当它离开给定元素时。

如果你把你的盒子阴影包含在一个类中，这样的东西就足够了：

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），但也可以根据您的需要进行调整。

Answer 2

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

相关：Is there a "previous sibling" CSS selector?

我认为最好的选择是添加一个＆＃39; box-shadow＆＃39;对两个图像进行分类，并使用jQuery在悬停时切换此类。

＆＃13;

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

＆＃13;

#gallery img {
  height: 120px;
  width: auto;
}

.box-shadow {
  box-shadow: 1px 1px 4px #333;
}

＆＃13;

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

＆＃13;

<强>加成：

您也可以使用这种方法，使得使用“盒子阴影”类过时，但它需要更多行的jQuery（让我更喜欢类解决方案）。

$("#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"
  });
});

Answer 3

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

具有透明边框的选择器是默认的非悬停状态。红色边框用于项目处于活动状态时（您应用框阴影的位置）。当徘徊时，我还将第一个边界增加了1px。

＆＃13;

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

＆＃13;

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

＆＃13;

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

更改：第一个类型：最后一个类型的悬停

3 个答案: