Question

I am having problems accessing the right selector. Currently, on mouseover the ENTIRE grouping of 3 paragraphs gets highlighted not just the one I am mouseover. It should just highlight the 2 elements Title and Content in the paragraph that was mouseover. Any ideas?

HEAD

$('.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>

The codes not coming out that pretty. Apologies.

Answer 1

You have to add the mouse events to the li and then only highlight the spans with in this li using $(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");
    });

But as I posted yesterday in an answer to another question of you, this may be also possible with plain CSS for modern browsers.

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

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

Edit

As I read from your comments you have to modify your HTML, to have it work as you want it to.

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

and use the following CSS:

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

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