divclass:hover + divclass2 - 不工作

Question

当我漂浮在整个面板尺寸上时，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 锚点上时添加额外的悬停状态！

更新

我想从技术上讲，您不需要原始的悬停状态，因为您将无法再单独执行它们...因此您可以删除 .panel-txt-area:hover 和 .panel-title- bg span:hover 如果你愿意...

Answer 2

您的 CSS 中有一些不正确的命名结构。

无 class 或 panel-text-area-efftct
选择了错误的元素来添加背景变化

换个地方试试

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

为此添加一个新的选择器

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

这也适用于所有图像和文本区域，而不仅仅是第一个区域。

完整示例：JSFiddle

Answer 3

check this fiddle

你的代码就是这样，我刚刚添加了 jquery 函数来达到你想要的效果。

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

jquery 函数：

$(".img-panel").hover(function(){
$(".panel-title-text").css("opacity","0");
$(".panel-txt-area").css("background-color","pink");
});

希望这对您有所帮助:)

Answer 4

您将无法使用 css 这样的脱节翻转，只有 javascript 才能查看另一个元素的状态并根据条件等在其他地方应用。如果它是child 当然可以 - 下面对此进行了演示。你可以使用：-

.sm-gutter:hover, .sm-gutter:hover h3 span{
  background:purple;
}

坚持使用 css 解决方案是否有用？

divclass:hover + divclass2 - 不工作

divclass:hover + divclass2 - not working

html

css

background

hover