html - 分区类 :hover + divclass2 - not working

Question

Here is a JS fiddle

当我漂浮在面板的整个尺寸上时，img 高度+文本区域高度，我希望文本区域(灰色)变为粉红色，标题透明度为 100%。

我可以单独做，但他不一样。我看了一些答案，觉得

divclass:hover + divclass2 {background-color:...;}

可能是答案，但我无法让它工作。

你能帮忙吗？

HTML:

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-sx-12">
    <a href="#" class="box-link " id="">
      <div class="row sm-gutter">
        <div class="img-panel" id="img1">
          <div class="panel-title-bg">
            <div class="panel-title-text" id="panel-text-area-efftct">
              <h3><span>Title &raquo;</span></h3>
            </div>
          </div>
        </div>
        <div class="panel-txt-area">
          <p>blablablabla</p>

        </div>
      </div>
    </a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-sx-12">
    <a href="#" class="box-link" id="#">
      <div class="row sm-gutter">
        <div class="img-panel" id="img2">
          <div class="panel-title-bg">
            <div class="panel-title-text">
              <h3><span>Title &raquo;</span></h3>
            </div>
          </div>
        </div>
        <div class="panel-txt-area">
          <p>blablablabla.</p>

        </div>
      </div>
    </a>
  </div>
</div>

CSS

.panel-txt-area {
  height: 140px;
  background-color: #e6e6e6;
  color: #424a52;
  padding: 10px;
  position: relative;
  font-weight: bold;
}

.panel-txt-area:hover {
  background-position: 0 100%;
  background-color: #d10373;
  color: #fff;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.panel-title-bg {
  padding: 10px 10px 10px 10px;
  color: #fff;
  position: relative;
  bottom: -190px;
}

.panel-title-bg span {
   background-color: rgba(209,3,115,.6); /*#d10373; */
  padding: 10px 10px 10px 10px;
  color: #fff;
  text-transform: uppercase;
}

.panel-title-bg span:hover{
     background-color: rgba(209,3,115,1.0);

}


.img-panel {
    height: 250px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img1:hover + panel-text-area-efftct{
  background-color:#d10373;
}


#img1 {
  background-image: url(http://lorempixel.com/image_output/food-q-c-700-430-1.jpg);
}

#img2 {
  background-image: url(http://lorempixel.com/image_output/fashion-q-c-700-430-3.jpg);
}

Answer 1

只需更改您的 CSS:

改变这个:

.panel-txt-area:hover {
  background-position: 0 100%;
  background-color: #d10373;
  color: #fff;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

为此:

.box-link:hover .panel-txt-area,
.panel-txt-area:hover {
  background-position: 0 100%;
  background-color: #d10373;
  color: #fff;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

并改变这个:

.panel-title-bg span:hover{
     background-color: rgba(209,3,115,1.0);

}

为此:

.box-link:hover .panel-title-bg span,
.panel-title-bg span:hover{
     background-color: rgba(209,3,115,1.0);

}

我们所做的只是在您将鼠标悬停在 .box-link anchor 上时添加一个额外的悬停状态!

更新

我想从技术上讲你不需要你原来的悬停状态，因为你不能再单独做它们......所以你可以删除 .panel-txt-area:hover 和 .panel-title-bg span :hover 如果你愿意...