CSS：悬停在一个元素上，影响另一个？ [复制]

Question

请在此处查看页面：

http://176.32.230.17/printingcrazy.com/branding-services

我正在尝试实现悬停效果，因此，如果您将鼠标悬停在列出的任何服务上，则相关图像将具有例如边框。

如果你将鼠标悬停在图片上，相关文字会改变颜色。

左侧的元素与右侧的元素位于不同的父级中。

是的，我见过CSS: Hover one element, effect for multiple elements? 并尝试了所有方法，但无法使其适用于我的情况。

任何帮助将不胜感激！

<div class="servicepage">

<div class="serviceleft">
<img src="/digitalprint.jpg">
<img src="/dyesub.jpg">
</div>

<div class="serviceright">
<ul>
<li>
<h3>Digital Print</h3>
</li>
<li>
<h3>Dye Sublimation</h3>
</li>
</ul>
</div>

</div>

Answer 1

这是一个简化的例子。希望它可以帮助您入门。

基本上我们是在鼠标悬停在div foo 上时设置回调函数。在这些函数中，我们正在更改 img 的 css 属性，在本例中，添加 border 并将其删除。

http://jsfiddle.net/btevfik/YC2tg/

JQUERY

$(document).ready(function () {
    $(".foo").hover(function () {
        $(".bar").css("border", "5px red solid");
    });
    $(".foo").mouseleave(function () {
        $(".bar").css("border", "none");
    });
});

HTML

<div class="foo">HOVER HERE</div>
<img class="bar" src="http://placekitten.com/100/100" />

Answer 2

你可以这样做。

HTML：

<div class="servicepage">
    <div class="serviceleft">
        <img class="digitalprint" src="/digitalprint.jpg">
        <img class="dyesub" src="/dyesub.jpg">
    </div>
    <div class="serviceright">
        <ul>
            <li class="digitalprint">
                 <h3>Digital Print</h3>
            </li>
            <li class="dyesub">
                 <h3>Dye Sublimation</h3>
            </li>
        </ul>
    </div>
</div>

jquery：

$(".serviceleft > img").hover(

function () {
    var imgclass = $(this).attr("class");
    $("li." + imgclass).css("color", "red");
},

function () {
    var imgclass = $(this).attr("class");
    $("li." + imgclass).css("color", "black");
});

Answer 3

我已尝试在网站上为您的标记重现代码，并且此 jQuery 代码应该可以工作，只需将其复制/粘贴到您的网站上即可。

<script type="text/javascript">
    $(document).ready(function(){
        $(".serviceright h3").mouseenter(function(){
            var indexH3 = $(this).parent().index();
            $(".serviceleft .spotlight").eq(indexH3).addClass("border");
        });
        $(".serviceright h3").mouseleave(function(){
            $(".serviceleft .spotlight").removeClass("border");
        });

        $(".serviceleft .spotlight").mouseenter(function(){
            var indexA = $(this).index();
            $(".serviceright h3").eq(indexA).addClass("redtext");
        });
        $(".serviceleft .spotlight").mouseleave(function(){
            $(".serviceright h3").removeClass("redtext");
        });
    });
</script>

你必须为悬停效果添加一些CSS类，例如

.border {
    border: 1px solid red;
}

.redtext {
    color: red;
}

设置悬停效果的属性，如果需要重命名这些类，也可以在 jQuery 代码中更改这些名称。

这里是DEMO