Question

我需要一行中的这4个盒子才能有透明的颜色叠加。当鼠标悬停在项目上时，我需要叠加层消失。悬停效果不是很重要，我可以搞清楚。我不能让叠加层正常工作。任何帮助都非常感谢，以及任何通用代码指针。

<section class="alltheboxes">
<nav class="blocks">
    <a href><img src="http://1.bp.blogspot.com/-BOnhWvvehfc/TeALNpDgDkI/AAAAAAAAANs/XJFcw2A2kW4/s1600/terrapin-hopsecutioner.jpg"> 
    <span>one</span></a>

  <a href><img src="https://lh3.googleusercontent.com/-fI0W7blvrk0/TXFLhefMQhI/AAAAAAAAAHM/qGdorrJn9rY/s400/191858_168745176511686_168156473237223_421534_1733583_o.jpg"><span>two</span></a>

  <a href><img src="https://lh6.googleusercontent.com/-FYjkHbSx_EI/TXZC8Xl6LHI/AAAAAAAAAHc/gcBMIXQsdVU/s320/IMAG0221.jpg"><span>three</span>
  </a>
    <a href><img src="#"><span>four</span></a>
  </nav>
</section>

CSS

.blocks a {
        position: relative;
        display: block;
        padding-right: 25%;
        padding-bottom: 25%;
        outline: 1px solid black;
        text-decoration: none;
        color: white;
        font-size: 4em;
        width: 25%;
        box-sizing: border-box;
        overflow: hidden;
        float: left;
    }
.blocks img {
        position: absolute;
        height: 100%;
        z-index: 5;
        display: block;
        box-sizing: border-box;

}
.blocks span {
        position: absolute;
        bottom: 0;
        z-index: 9001;
}

仅限HTML和CSS。

如果你想在行动http://codepen.io/jrutishauser/pen/wBdGRd

中看到它

Answer 1

将{pseudo}元素添加到每个a元素，rgba()值为background-color，并在rgba(r, g, b, a)上更改:hover的alpha值。< / p>

<强> Updated CodePen

.blocks a {
  position: relative;
  display: block;
  padding-right: 25%;
  padding-bottom: 25%;
  outline: 1px solid black;
  text-decoration: none;
  color: white;
  font-size: 4em;
  width: 25%;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
}
.blocks img {
  position: absolute;
  height: 100%;
  z-index: 5;
  display: block;
  box-sizing: border-box;
}
.blocks span {
  position: absolute;
  bottom: 0;
  z-index: 6;
}
.alltheboxes a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(255, 200, 0, 0.5);
  z-index: 7;
  transition: background 0.4s ease;
}
.alltheboxes a:hover:before {
  background: rgba(255, 255, 255, 0);
}

<section class="alltheboxes">
  <nav class="blocks">
    <a href="#">
      <img src="http://1.bp.blogspot.com/-BOnhWvvehfc/TeALNpDgDkI/AAAAAAAAANs/XJFcw2A2kW4/s1600/terrapin-hopsecutioner.jpg" /><span>one</span>
    </a>
    <a href="#">
      <img src="https://lh3.googleusercontent.com/-fI0W7blvrk0/TXFLhefMQhI/AAAAAAAAAHM/qGdorrJn9rY/s400/191858_168745176511686_168156473237223_421534_1733583_o.jpg" /><span>two</span>
    </a>

    <a href="#">
      <img src="https://lh6.googleusercontent.com/-FYjkHbSx_EI/TXZC8Xl6LHI/AAAAAAAAAHc/gcBMIXQsdVU/s320/IMAG0221.jpg" /><span>three</span>
    </a>
    <a href="#">
      <img src="#" /><span>four</span>
    </a>
  </nav>
</section>

Answer 2

您需要在每个链接中添加一个伪元素：在或之后使用您需要的颜色的背景，并在悬停元素时将不透明度设置为0

    a{
        display: block;
        position: relative;
        width: 475px;
    }
    a:after{
        background: none repeat scroll 0 0 rgba(105, 50, 20, 1);
        content: "\A ";
        height: 100%;
        left: 0;
        opacity: 0.6;
        position: absolute;
        top: 0;
        transition: all 0.5s ease 0s;
        width: 100%;
    }
    a:hover:after{
        opacity:0;
    }

<a href="#">
   <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" alt="" />
</a>

http://jsfiddle.net/j4su90c4/

Answer 3

.blocks a::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5); /*your color*/
  z-index:999;
}
.blocks a:hover::before{
  background:none;
}

无法使颜色叠加工作。我错过了什么？

3 个答案: