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的解決方案堅持？