Наведение на один элемент вызывает эффект зависания на другом элементе с помощью jQuery.

Question

Я должен создать эффект окаймления, когда наведу курсор на элемент и наоборот.

Мне удалось это сделать, но проблема в том, что каждый раз, когда я наводил курсор на один из этих элементов, я отменял эффект зависания на элементе, над которым я висел.

Когда я наведите курсор мыши с 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

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

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