3

请在此处查看页面：

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

3 回答 3

6

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

基本上我们是在鼠标悬停在divfoo 上时设置回调函数。在这些函数中，我们正在更改 的 css 属性img，在这种情况下，添加border和删除它。

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

查询

$(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" />
于 2013-04-08T01:23:34.110 回答
1

你可以这样做。

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>

查询：

$(".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");
});
于 2013-04-08T01:31:39.447 回答
1

我已经尝试在网站上为您的标记重现代码，并且这个 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 代码中更改这些名称。

这是演示

于 2013-04-08T02:07:29.327 回答