CSS：悬停在一个元素上，影响另一个元素？

Question

请在此处查看页面：

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

我想要实现一种悬停效果，例如当您将鼠标悬停在任何服务上时，相应的图像将有一个边框。

如果您悬停在图像上，相关文本将更改颜色。

左侧的元素与右侧的元素不属于同一个父元素。

是的，我已经看了CSS：悬停一个元素，影响多个元素？并尝试了所有方法，但无法将其应用到我的情况中。

非常感谢您的帮助！

<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>

- Gareth Pullen

---

请贴出您的代码，而不是链接。 - seanbreeden

已编辑以包含简化代码，抱歉。 - Gareth Pullen

这不能通过CSS完成。如果您想保留当前的HTML标记，必须使用jQuery/JavaScript。 - Miljan Puzović

真的吗？:( 好吧...我不知道如何使用jQuery或JavaScript完成这个任务。 - Gareth Pullen

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" />

- btevfik

---

太好了，我们能否在父子元素之间做同样的事情？（例如：将鼠标悬停在子元素上以更改父元素的边框。） - Bee

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

- Guilherme Reda

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代码中更改这些名称。

这里是演示

- Miljan Puzović

---

谢谢。我使用@btevfik的代码成功完成了，但这意味着每个服务需要4行代码= 36行代码。我会尽快尝试使用你的代码替换它！ - Gareth Pullen

好的，试试btefvik的代码。只是为了明确，这段代码是完整的，你不需要改变它。 - Miljan Puzović