Question

我在我的codepen演示中托管了Google的三张图片。

我制作了图像叠加层，当用户将鼠标悬停在它们上方时会添加半透明叠加层。

他们工作得很好，但是由于最后一个的颜色，当它比其他两个颜色悬停时看起来更暗。

我想知道是否有办法使用第n个子（或类似）选择器选择最后一个图像，这样我可以设置具有较低不透明度的图像，而不管其他两个，我想保持不变。

这是代码链接 - http://codepen.io/skoster7/pen/ozgjmP?editors=1100

就像我说的那样，我希望最后一个图像的透明度低于其他两个，理想情况下使用nth-child选择器或类似的东西。

我知道我可以使用具有不同类名的单独叠加层，但想要知道这是否可行。

＆＃13;

.flexcontainer {
  display: flex;
}
.spr,
.wint,
.aut {
  width: 300px;
  height: 200px;
  margin: 5px;
}
.overlay {
  transition: .5s;
  position: absolute;
  margin: 12.5px 0 0 5px;
  top: 0;
  width: 300px;
  height: 200px;
  background: black;
  opacity: 0;
}
.overlay:hover {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: .6;
}
.overlay p {
  font-size: 2em;
  color: white;
  font-family: verdana;
  text-align: center;
}
.photocontainer:last-child .overlay:hover {
  rgba(20, 5, 5, 0.35);
  text-
}

＆＃13;

<div class="flexcontainer">


  <div class="photocontainer">
    <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
    <div class="overlay">
      <p>Spring is here</p>
    </div>
  </div>


  <div class="photocontainer">
    <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
    <div class="overlay">
      <p>Winter is here</p>
    </div>
  </div>


  <div class="photocontainer">
    <img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
    <div class="overlay">
      <p>Autumn is here</p>
    </div>
  </div>

</div>

＆＃13;

Answer 1

这是您使用nth-child定位每个元素的方法，我们定位父元素，即.photocontainer，因为它们在所有三个图片中都是相同的class name。

.photocontainer:nth-child(1) > .overlay:hover {
  opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
  opacity: 0.6;
}
.photocontainer:nth-child(3) >  .overlay:hover {
  opacity: 1;
}

＆＃13;

.flexcontainer {
  display: flex; 
}

.spr,
.wint,
.aut {
  width: 300px; 
  height: 200px;
  margin: 5px; 
}

.overlay {
  transition: .5s; 
  position: absolute;
  margin: 12.5px 0 0 5px;
  top: 0;  
  width: 300px;
  height: 200px;
  background: black; 
  opacity: 0;   
  
}

.overlay:hover {
  transition-delay: .2s;
  transition-duration: 1s; 
}

.overlay p {
  font-size: 2em; 
  color: white;
  font-family: verdana; 
  text-align: center;  
}

.photocontainer:nth-child(1) > .overlay:hover {
  opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
  opacity: 0.6;
}
.photocontainer:nth-child(3) >  .overlay:hover {
  opacity: 1;
}

＆＃13;

    <div class="flexcontainer">


    <div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
      <div class="overlay"><p>Spring is here</p>
      </div>
      </div>


    <div class="photocontainer">  <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
      <div class="overlay"> <p>Winter is here</p>
      </div>
      </div>


      <div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
        <div class="overlay"><p>Autumn is here</p>
     </div>
      </div>

    </div>

＆＃13;

Answer 2

以下是您如何定位它。 opacity值仅作为示例。

.photocontainer:last-child .overlay:hover {
  opacity: .3;
}

revised codepen

:last-child pseudo-class定位同一父母的最后一个兄弟。

在您的HTML中，第三张图片包含在最后一个.photocontainer div。

中

一旦焦点在第三个容器上，您就可以使用descendant selector来定位图像。

另外，请记住，opacity属性不仅适用于目标元素，也适用于所有元素的后代。

因此，当你减少.overlay的不透明度时，里面的文字也会逐渐消失。

解决方案是使用rgba()颜色方法。 a代表Alpha通道，并允许您仅将透明度应用于颜色。

将此添加到您的代码中：

.photocontainer:last-child .overlay:hover {
    background-color: rgba(0, 0, 0, 0.5); 
}

revised codepen illustrating both methods

（如果您正在将opacity应用于图片，那就是另一个球类游戏。您可以在此网站上找到关于该主题的大量帖子。）

参考文献：

Answer 3

<强>已更新

文字不透明度降低和上一次儿童不透明度控制的问题都已修复

CODEPEN

的工作示例

HTML：

<div class="flexcontainer">


  <div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
    <div class="overlay"></div>
    <p>Spring is here</p>
  </div>


  <div class="photocontainer"> <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
    <div class="overlay"></div>
    <p>Winter is here</p>

  </div>


  <div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
    <div class="overlay"></div>
    <p>Autumn is here</p>
  </div>

</div>

CSS：

.flexcontainer {
  display: flex;
}

.photocontainer,
.spr,
.wint,
.aut {
  width: 300px;
  height: 200px;
  margin: 5px;
  position: relative;
}

.overlay {
  transition: .5s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 200px;
  background: black;
  opacity: 0;
  margin: 5px;
}

.photocontainer p {
  position: absolute;
  font-size: 2em;
  color: white;
  font-family: verdana;
  text-align: center;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 5px;
  z-index: 1;
  transition: .5s;
  opacity: 0;
}

.photocontainer:hover .overlay {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: 0.6;
}

.photocontainer:hover p {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: 1;
}

.photocontainer:hover:last-child .overlay {
  opacity: 0.3;
}

旧：

.photocontainer:last-child .overlay:hover {
  opacity: 0.4;
}

我希望你们这两个问题都得到了解决。

享受：）

使用第n个孩子选择一个特定的兄弟

3 个答案: