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设置为颜色黑色。然后将有效h3设置为红色。

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

1 个答案: