Проблемы с доступом к нужному Jquery Selector для изменения CSS при наведении курсора - PullRequest
Новая
       4

Проблемы с доступом к нужному Jquery Selector для изменения CSS при наведении курсора

0 голосов
/ 15 июня 2011

У меня проблемы с доступом к правому селектору. В настоящее время при наведении курсора выделяется ВСЯ группа из трех абзацев, а не только та, которую я нахожу. Следует просто выделить 2 элемента Title и Content в абзаце, который был при наведении курсора. Есть идеи?

ГОЛОВА 

$('.leftPanelCarousel').mouseover(function () {
    $('.leftPanelBodyTitle', this).css("color", "#a43802");
    $('.leftPanelBodyContent', this).css("color", "#a43802");
});
$('.leftPanelCarousel').mouseout(function () {
    $('.leftPanelBodyTitle', this).css("color", "White");
    $('.leftPanelBodyContent', this).css("color", "White");
});

HTML 

<div class="leftPanelCarousel">
    <ul>
        <li>
            <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span><br /><br />
            <span class="leftPanelBodyHeader"><b>Press</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span><br /><br />
            <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span>
        </li>
        <li>
            <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span><br /><br />
            <span class="leftPanelBodyHeader"><b>Press</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span><br /><br />
            <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span>
        </li>
        <li>
            <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span><br /><br />
            <span class="leftPanelBodyHeader"><b>Press</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span><br /><br />
            <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
            <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
            <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span>
        </li>
    </ul>
</div>

Коды не очень красивые. Извинения.

Ответы [ 4 ]

3 голосов
/ 15 июня 2011

Вы должны добавить события мыши к li, а затем только выделить пролеты с помощью этого li, используя $(this)

    $('.leftPanelCarousel li').mouseover(function () {
        $(this).find('.leftPanelBodyTitle').css("color", "#a43802");
        $(this).find('.leftPanelBodyContent').css("color", "#a43802");
    });
    $('.leftPanelCarousel li').mouseout(function () {
        $(this).find('.leftPanelBodyTitle').css("color", "White");
        $(this).find('.leftPanelBodyContent').css("color", "White");
    });

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

.leftPanelCarousel li .leftPanelBodyTitle, 
.leftPanelCarousel li .leftPanelBodyContent {
    color: #ffffff;
}

.leftPanelCarousel li:hover .leftPanelBodyTitle, 
.leftPanelCarousel li:hover .leftPanelBodyContent {
    color: #a43802;
}

Edit

Как я читал из ваших комментариев, вы должны изменить свой HTML, чтобы он работал так, как вы хотитеэто к. 

<div class="leftPanelCarousel">
    <ul>
        <li>
            <p>
                <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
                <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
                <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span>
            </p>
            <p>
                <span class="leftPanelBodyHeader"><b>Press</b></span><br />
                <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
                <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span>
            </p>
            <p>
                <span class="leftPanelBodyHeader"><b>Blog</b></span><br />
                <span class="leftPanelBodyTitle">Vivamus consectetur mattis quam</span><br />
                <span class="leftPanelBodyContent">Lorem ipsum dolor sit amet, consectetur<br />adipiscing elit. Nulla ut magna sit. +</span>
            </p>
        </li>
    </ul>
</div>

и используйте следующий CSS: 

.leftPanelCarousel li p .leftPanelBodyTitle, 
.leftPanelCarousel li p .leftPanelBodyContent {
    color: #ffffff;
}

.leftPanelCarousel li p:hover .leftPanelBodyTitle, 
.leftPanelCarousel li p:hover .leftPanelBodyContent {
    color: #a43802;
}
0 голосов
/ 15 июня 2011

Проблема в этой строке, 

   $('.leftPanelBodyTitle', this).css("color", "#a43802");

this указывает на .leftPanelCarousel.Итак, $('.leftPanelBodyTitle', this) выделяет все .leftPaneBodyTitle внутри div и устанавливает CSS.

Вам нужно что-то вроде этого, 

$('.leftPanelCarousel > li').mouseenter(function () {
        $(this).find('.leftPanelBodyTitle').css("color", "#a43802");
        $(this).find('.leftPanelBodyContent').css("color", "#a43802");
    });
    $('.leftPanelCarousel > li').mouseleave(function () {
        $(this).find('.leftPanelBodyTitle').css("color", "White");
        $(this).find('.leftPanelBodyContent').css("color", "White");
    });

use mouseenter & mouseleave

0 голосов
/ 15 июня 2011

просто вызовите значение объекта $ (this) insded из $ ('. LeftPanelBodyTitle', this) 

$('.leftPanelCarousel').mouseover(function () {
            $(this).css("color", "#a43802");
            $(this).css("color", "#a43802");
        });

$('.leftPanelCarousel').mouseenter(function () {
$(this).find('.leftPanelBodyTitle').css("color", "#a43802");
$(this).find('.leftPanelBodyContent').css("color", "#a43802");

}). Mouseleave (function () {$ (this) .find ('. LeftPanelBodyTitle)') .removeAttr (' style '); $ (this) .find ('. leftPanelBodyContent '). removeAttr (' style ');});

0 голосов
/ 15 июня 2011

Попробуйте это: 

$('.leftPanelCarousel ul li').mouseenter(function () {
    $(this).find('.leftPanelBodyTitle').css("color", "#a43802");
    $(this).find('.leftPanelBodyContent').css("color", "#a43802");
}).mouseleave(function () {
    $(this).find('.leftPanelBodyTitle').removeAttr('style');
    $(this).find('.leftPanelBodyContent').removeAttr('style');
});

Но у вас есть проблема с вашей разметкой HTML, я полагаю, что у вас есть несколько 'leftPanelBodyTitle' & 'leftPanelBodyContent' элементов, находящихся под одним и тем же <li>, поэтому, если вы разделитеим, этот код будет работать.

...