divclass：悬停+ divclass2 - 不工作

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的链接锚增加一个额外的悬停状态！

UPDATE

我想在技术上你不需要原来的悬停状态，你将不能够做他们分别了......这样你就可以删除.panel-TXT领域：悬停和.panel-title-bg span：悬停如果你愿意...

Answer 2

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

• 选择了错误的元素panel-text-area-efftct
• 无类或ID指示灯被添加在

---

背景变化试着改变了

#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就能够看的状态另一个因素，并适用于其他条件等。如果它是它的孩子，当然它可以 - 下面演示了这一点。 您coud使用： -

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

难道这是使用替代，使用CSS的解决方案坚持？