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

标签 html css background hover

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);
}

最佳答案

只需更改您的 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 如果你愿意...

关于html - 分区类 :hover + divclass2 - not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35460041/

相关文章:

html - Chrome 选择/下拉控件缺少边框 - 最新的 Chrome (69.0.3497)、Windows 10

java - 如何将 css 添加到 JavaFx 元素

javascript - 如何在每个 div 转换之间放置间隔

css - 我可以在 <div> 顶部添加图像而不添加任何 html 标签吗?

html - IMG 和 TD 的 CSS 宽度/高度

html - 在 URL 栏/生成配置文件页面中显示的文本框中键入的文本

php - 在php中创建基于register的数据库驱动的用户主页

jquery - 如何检查 li classname 是使用 jquery 设置的?

重启时的 iOS Swift 后台状态

android - 如何为Android按钮设置背景图片但保留灰色按钮?