jQuery этот дочерний элемент наведите курсор на цвет фона - PullRequest
Новая
       33

jQuery этот дочерний элемент наведите курсор на цвет фона

0 голосов
/ 28 ноября 2011

Я все еще изучаю jQuery и был бы признателен за некоторые советы с этим, так как я думаю, что это просто, но не уверен, как это сделать вполне.

См. Ниже мою разметку, созданную Wordpress, ее боковую панельсписок категорий с количеством постов. 

    <div id"sidebar-left">

        <ul id="sidebar-categories">
            <li class="list-header">Contents</li>

            <li class="cat-item cat-item-3">
                <a title="" href="x">News</a>
                <span>1</span>
            </li>
            <li class="cat-item cat-item-4">
                <a title="" href="x">Racing</a>
                <span>4</span>
            </li>
            <li class="cat-item cat-item-1">
                <a title="" href="x">Uncategorized</a>
                <span>1</span>
            </li>
        </ul>

    </div>

Теперь это все круто, но мой счетчик промежутков позиционируется абсолютно над верхней частью тега в li.

Это означает, что моя проблема заключается в том, что когда я наведите курсор на тег, а затем наведите курсор на диапазон, мое состояние наведения тега исчезнет.Поэтому я пытаюсь активировать тег: hover, когда переворачиваю промежуток.

Теперь мне удалось сделать это, используя jQuery ниже ... 

    $("ul#sidebar-categories li span").hover(function() {
        $("ul#sidebar-categories li a").css({ 
            backgroundColor: "464848" // a tag hover bg color
        });
    }, function() {
        $("ul#sidebar-categories li a").css({ 
            backgroundColor: "daddd7" // a tag normal bg color
        });
    });

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

Это моя попытка ниже, чтобы получить только активацию цвета фона тега внутри текущего родительского элемента li,Но это не работает.Я также попробовал родительский, но все еще не работает. 

    $("ul#sidebar-categories li span").hover(function() {
        $(this).children("ul#sidebar-categories li a").css({ 
            backgroundColor: "464848" // a tag hover bg color
        });
    }, function() {
        $(this).children("ul#sidebar-categories li a").css({ 
            backgroundColor: "daddd7" // a tag normal bg color
        });
    });

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

Hover Status Category List UI

Так как при наведении курсора на список категорий, а затем наведении указателя мыши на «счетчик сообщений», псевдокласс a: hover теряется.

Заранее спасибо.Джош

//// Дополнение мой CSS 

#sidebar-left ul {
    font-family: 'HelveticaNeueMediumCond';
    position: relative;
    border-bottom: 1px solid #eef0eb;
    padding: 21px 0 0;
    list-style: none;
}

#sidebar-left ul li {
    position: relative;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    height: 48px;
}

.list-header {
    border-top: 1px solid #eef0eb !important;
    border-bottom: 1px solid #c6c8c2 !important;
    height: 15px !important;
    padding: 7px 10px 5px !important;
    background: #c4c7c2;
    color: #fbfcfb;
    font-size: 14px;
}

#sidebar-left ul li a {
    width: 270px;
}

#sidebar-left ul li a {
    height: 20px;
    display: inline-block;
    border-top: 1px solid #eef0eb;
    border-bottom: 1px solid #c6c8c2;
    text-decoration: none;
    font-size: 20px;
    padding: 13px 10px;
    color: #464848;
    text-shadow: #eef0ea 1px 1px 0;
    outline: 0;
}

#sidebar-left ul li a:hover {
    border-top: 1px solid #4c4e4c;
    border-bottom: 1px solid #464848;
    text-decoration: none;
    color: #fbfcfb;
    text-shadow: #2d2e2e 1px 1px 0;
    background: #464848;
}

#sidebar-left ul li span {
    position: absolute;
    right: 10px;
    background: #ffffff;
    padding: 4px 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    font-size: 15px;
    color: #2cbcf5;
    height: 15px;
    min-width: 24px;
    text-align: center;
    z-index: 2;
    top: 0;
    font-family: 'HelveticaNeueBoldCond';
    margin: 12px 0;
    -webkit-box-shadow: 0px 1px 0px 0px #cbcec8;
    -moz-box-shadow: 0px 1px 0px 0px #cbcec8;
    box-shadow: 0px 1px 0px 0px #cbcec8; 
}

#sidebar-left ul li span:hover {
    -webkit-box-shadow: 0px 1px 0px 0px #252525;
    -moz-box-shadow: 0px 1px 0px 0px #252525;
    box-shadow: 0px 1px 0px 0px #252525;    
}

1 Ответ

2 голосов
/ 28 ноября 2011

Есть ли причина, по которой вы не можете активировать наведение на элементы родительского списка, а не на тег привязки? Если это не сработает, вы можете использовать функцию .siblings (), чтобы выбрать все родственные DOM-элементы диапазона. Попробуйте что-то вроде этого: 

$("ul#sidebar-categories li span").hover(function() {
    $(this).siblings().css({ 
        backgroundColor: "464848" // a tag hover bg color
    });
}, function() {
    $(this).siblings().css({ 
        backgroundColor: "daddd7" // a tag normal bg color
    });
});

Это позволит выбрать ближайших братьев и сестер и изменить их цвет фона. Если вам нужна дополнительная фильтрация элементов, вы можете передать селектор CSS в функцию .siblings ().

...