2015-04-30 6 views
1

Я постараюсь объяснить это как можно лучше. У меня есть 5 ящиков и я хочу, чтобы 1 ящик имел другой цвет заголовка. Когда я наводил курсор на другие 4 окна, я хочу, чтобы заголовок активного поля менялся, в результате новый заголовок был другого цвета. Мышь выключена, и заголовок останется таким цветом.Наведите указатель мыши на div, измените еще один заголовок div

Я установил его, поэтому, когда вы наводите курсор на изображение, текст абзаца изменяется в соответствии с изображением. У меня есть текст заполнителя, который исчезает, когда происходит зависание.

Все, что я пробовал, не работает, но я знаю, что есть ответ. Спасибо огромное!

Вот мой код:

<div class="process">  
      <div class="step box-1"> 
       <img src="img/seed.jpg" rel="first-step"> 
       <h3>SEED</h3> 
      </div> 
      <div class="step box-2"> 
       <img src="img/seedling.jpg" rel="second-step"> 
       <h3>CULTIVATE</h3> 
      </div> 
      <div class="step box-3"> 
       <img src="img/drop" rel="third-step"> 
       <h3>DISTILL</h3> 
      </div> 
<h4 class="steps first-step"> 
      Powerful, effective essential oils come from seeds and plants that are verified for their essential oil potential by Young Living experts, partnering with university experts. 
      </h4> 
      <h4 class="steps second-step"> 
      Young Living farms, located around the globe, are dedicated to perfecting the best growing and harvesting methods. Our experts also travel the world visiting our co-op farms to verify that their growing and cultivating processes match our high standards. These operations provide an ongoing source for essential oils that meet Young Living's demanding quality standards. 
      </h4> 
      <h4 class="steps third-step"> 
      Combining ancient and modern techniques, Young Living is recognized as an innovator in essential oil distillation. We use a gentle, proprietary technique for steam extracting the most effective essential oils, as well as using cold pressing and resin tapping methods for select oils. 
      </h4> 
      <div> 

JS:

$(document).ready(function() { 
var $placeholder = $('.placeholder'); 
$('.step> img').hover(function() { 
var $rel = $(this).attr('rel'); 
$placeholder.hide(); 
}); 
}); 

$(document).ready(function() { 
var $captions = $('.steps'); 
$captions.hide(); 
$('.step> img').hover(function() { 
var $rel = $(this).attr('rel'); 
$captions.hide(); 
$('.steps.'+ $rel +'').show(); 
}); 
}); 
+0

Которая должна иметь разный цвет? можете ли вы привести пример? – renakre

+0

, так что только выбранный заголовок должен быть другого цвета? – renakre

+0

Когда пользователь посещает страницу, «Seed» должен быть другого цвета с текстом-заполнителем. Когда вы наводите курсор на другие изображения, текст меняется, и цвет заголовка также должен меняться. Я знаю, как сделать простой наведение, но мне нужен цвет «Семя», чтобы вернуться к исходному цвету. – whitler21

ответ

1

Попробуйте этот код.

$(document).ready(function() { 
    var $placeholder = $('.placeholder'); 
    var $captions = $('.steps'); 
    $captions.hide(); 
    $('.step> img').hover(function() { 
     var $rel = $(this).attr('rel'); 
     $captions.hide(); 
     $placeholder.hide(); 
     $('.step h3').css('color', 'black'); 
     $(this).siblings('h3').css('color', 'red'); 
     $('.steps.'+ $rel +'').show(); 
    }); 
}); 

первых лет установить все .step h3 окрашивать черный. Затем установите активный h3 на красный.

+0

Это сработало! Огромное спасибо. Я бы не стал разбираться в селекторах. – whitler21

+0

Ваш прием, рад помочь. –

Смежные вопросы