Trying to find a solution for a unique problem. I have 5 boxes and need to style one box with a different heading color. As I hover over the other 4 boxes, I want the active box heading to change to a new color. The color should remain even after moving the mouse away.
Additionally, I have set up the functionality where hovering over an image causes the paragraph text to change according to the image. Placeholder text disappears upon hover.
Despite my attempts, I haven't been able to make it work. I'm confident there's a solution out there. Thank you for your help!
Code snippet:
<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();
});
});