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

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

3 个答案: