将鼠标悬停在 div 上会更改另一个 div 标题

Question

我会尽力解释这一点。我有 5 个盒子，想要 1 个盒子有不同的标题颜色。当我将鼠标悬停在其他 4 个框上时，我希望活动框标题发生变化，从而使新标题的颜色不同。鼠标关闭，标题将保持该颜色。

我将其设置为当您将鼠标悬停在图像上时，段落文本会根据图像发生变化。当发生悬停操作时，我有占位符文本消失。

我尝试的所有方法都不起作用，但我知道有一个答案。太感谢了！

这是我的代码：

<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();
});
});

Answer 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设置为颜色黑色。然后设置activeh3为red.

将鼠标悬停在 div 上会更改另一个 div 标题

Hover over div changes another div heading

css

jquery

mouseover

jquery-hover