悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

Posted 2023-05-08

【中文标题】悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

【英文标题】：Hover on one element causes hovering effect on other element with jQuery

【发布时间】：2012-03-18 23:11:11

【问题描述】：

当我将鼠标悬停在元素上时，我必须创建带边框的效果，反之亦然。

我设法做到了，但问题是每次我将鼠标悬停在其中一个元素上时，我都会取消悬停在我悬停的元素上的效果。

当我将鼠标悬停在 id="12345img" 上时会得到边框，而 id="12345a" 会得到颜色效果。当我反之亦然时，它也可以工作，但只是我第一次将鼠标悬停在它上面。

这是代码。

<script type="text/javascript">
    $(document).ready(function () 

        $('.portfolioProject a').hover(function () 
            var idElement = this.id;
            $("#" + idElement.replace('a', '') + "img").css('border', '2px solid #cdfc5d');
            $("#" + idElement + "a").css('color', '#cdfc5d');
        );

        $('.portfolioProject a').mouseleave(function () 
            var idElement = this.id
            $("#" + idElement.replace('a', '') + "img").css('border', 'none');
            $("#" + idElement + "a").css('color', 'white');
        );

        $('.portfolioImage img').hover(function () 
            var idElement = this.id;
            $("#" + idElement.replace('img', '') + "a").css('color', '#cdfc5d');
            $("#" + idElement + "img").css('border', '2px solid #cdfc5d');
        );

        $('.portfolioImage img').mouseleave(function () 
            var idElement = this.id
            $("#" + idElement.replace('img', '') + "a").css('color', 'white');
            $("#" + idElement + "img").css('border', 'none');
        );
    );
</script>

我的问题是如何修复它以使其每次都能正常工作。

jsFiddle link

【问题讨论】：

你能把你的演示放到 jsfiddle 上吗？

我马上就把它放在那里。

这里是：jsfiddle.net/q8JZy

【参考方案1】：

我认为你必须为鼠标悬停效果创建 CSS 类，然后你只需要在事件上切换类：

jquery：

$(document).ready(function () 
    $(".portfolioImageWrapper").on('mouseenter mouseleave', ".img", function () 
                  $(this).toggleClass('imgHover');
                  $("#" + (this.id).replace('img', '') + "a").toggleClass('imgHover');  
              );
        );

html：

<div class='portfolioProject'>
    <ul>
        <h2>
            <li>
    <a id='7a' href='#'> Link1</a>
            </li>
        </h2>
        <h2>
            <li>
                <a id='8a' href='#'> Link 2 </a>
            </li>
        </h2>
    </ul>
</div>
<div class='portfolioImageWrapper'>
    <div class='portfolioImage'><a href='#'><img class="img" src='#' alt='Image1' title='Image 1' id='7img' /></a></div><div class='portfolioImage'><a href='#'><img class="img" src='#' alt='Image 2' title='Image2' id='8img' /></a></div></div>

​CSS：

    .imgHover

    border-style: dotted;
    border-width: 1px;
    color: red;
    text-decoration: none;
​

jsfiddle

您肯定可以将不同的 CSS 类切换到您的链接。只需在 jquery 代码中修改它（在 toggleClass 函数中）并将类添加到 css 部分

【讨论】：

谢谢，这不是我所需要的，但对实现它有很大帮助！ ;)

【参考方案2】：

您是否希望当您将鼠标悬停在链接上时，图像应该有边框，而当您将鼠标移出链接时，图像的边框应该被删除？

此外，当您将鼠标悬停在图像上时，链接应该会被着色，而当您将鼠标移出图像时，链接应该会恢复到原来的颜色？

如果这是要求，此代码可能会有所帮助：

$(document).ready(function () 
$('.portfolioProject a').hover(
    function ()
    
        var idElement = this.id;
        $("#" + idElement.replace('a', '') + "img").css('border', '2px solid #cdfc5d');
       $("#" + idElement + "a").css('color', '#cdfc5d');
    ,
 function()
 
     var idElement = this.id;
     $("#" + idElement.replace('a', '') + "img").css('border', 'none');
     $("#" + idElement + "a").css('color', 'white');     
 
);


$('.portfolioImage img').hover(
    function ()
    
        var idElement = this.id;
        $("#" + idElement.replace('img', '') + "a").css('color', '#cdfc5d');
        $("#" + idElement + "img").css('border', '2px solid #cdfc5d');
    ,
    function()
    
       var idElement = this.id
       $("#" + idElement.replace('img', '') + "a").css('color', 'blue');
       $("#" + idElement + "img").css('border', 'none');
    
);


);

查看小提琴：http://jsfiddle.net/B47Gu/

我已经修改了小提琴，这是否符合您的目的：http://jsfiddle.net/B47Gu/3/

【讨论】：

其实我想同时有两个效果。当我将鼠标悬停在 上时，我希望 改变颜色， 获得边框。

我写的代码只是对你的代码的修改，可以进一步改进。