将鼠标悬停在一个元素上会导致jQuery对其他元素的悬停效果

时间:2012-02-29 12:57:11

标签: javascript jquery hover mouseleave

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

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

当我将鼠标悬停在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

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:2)

我认为你必须为鼠标悬停效果创建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部分