Question

我认为选择器有问题，但不太确定。

在图像轮播中，我希望.nav标签的不透明度为0.5 当.slide的类徘徊时。但奇怪的是，这只适用于旋转木马中的最后一张幻灯片，包含在幻灯片4中的codepen。

首先我认为这是一个分层问题，因为最后一张幻灯片来了最后在DOM中，并以某种方式影响它。所以我试着说，如果我能用z-index修复它，但没有解决它。

所以我认为它可能是输入：选中的选择器没有设置 .nav标签在第一张幻灯片上显示块，但是因为它们出现在我将它们直接悬停在他们上面，然后他们指向正确的幻灯片这意味着正确的.nav标签设置为显示块。

我唯一可以想到的是错误的是第64-65行的选择器。但我不确定，我想我已经尝试了几乎所有的东西。

Sass剪影：

.slide
  display: block
  opacity: 0
  position: absolute
  top: 0
  width: 960px
  height: 420px
  transform: scale(1.8) rotate(12deg)
  transition: all 3s ease-in-out

  &:hover + .nav label
    opacity: 0.5

.nav label
  position: absolute
  top: 0
  display: none
  font-family: 'Varela Round'
  font-size: 250px
  line-height: 380px
  color: #ffffff
  width: 100px
  height: 100%
  text-align: center
  opacity: 0
  z-index: 9
  text-shadow: 0px 0px 15px rgb(119, 119, 119)
  background-color: rgba(255, 255, 255, 0.3)

  &:hover
    opacity: 1

查看整个代码的codepen

Answer 1

我试着在codepen中愚弄你的代码，我通过在.nav label类下修复CSS来获得你想要的结果。

将display: none更改为display: block

简单。

我无法解释为什么要修复它，或者为什么你的代码事先没有工作......但它似乎与应用于input :checked伪类有关.nav label课程中的第四张图片，忽略其他图片。

使用类选择器，单选按钮和复选框输入，查看https://css-tricks.com/almanac/selectors/c/checked/以获取有关input:checked及其用法行为的更多信息。

Answer 2

在这里添加z-index = 3输入：checked + .slide-container .slide应该解决问题。

原因是因为你的其他.slide与当前幻灯片的级别相同，所以当你悬停当前幻灯片时，它会悬停最后一张幻灯片。

CSS选择器问题

2 个答案: