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.

• Ни один класс или ID индикатор 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 будет в состоянии смотреть на состояние другой элемент и применяется в других местах на условиях и т. д. Если бы это был ребенок, то, конечно, он мог бы - это демонстрирует ниже. Вы coud использовать: -

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

Может ли это быть использованы вместо наклеивания с раствором CSS?