在鼠标上方访问正确的Jquery选择器以更改CSS时出现问题

我在访问正确的选择器时遇到问题。目前，在mouseover上，3个段落的整个分组都会突出显示，而不仅仅是我是mouseover。它应该只突出显示鼠标悬停的段落中的两个元素标题和内容。有什么想法吗

头 HTML

博客

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


按

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


博客

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


博客

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


按

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


博客

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


博客

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


按

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+


博客

圣马蒂斯广场万岁

Lorem ipsum dolor sit amet，Concetetur
一位精英。大教堂的教堂+

代码没有那么漂亮。道歉。

试试这个：

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

元素位于同一

下，因此如果拆分它们，此代码将起作用。

尝试以下操作：

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

中，然后使用

$（this）

但正如我昨天在回答你的另一个问题时所说的，对于现代浏览器来说，使用简单的CSS也可能实现这一点

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

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

编辑 正如我从你的评论中读到的，你必须修改你的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>

---

您必须将鼠标事件添加到

li

，然后使用

$（this）

但正如我昨天在回答你的另一个问题时所说的，对于现代浏览器来说，使用简单的CSS也可能实现这一点

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

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

编辑 正如我从你的评论中读到的，你必须修改你的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>

只需调用对象值$（this），包含$（'.leftPanelBodyTitle'，this）

}).mouseleave（函数（）{ $（this.find（'.leftPanelBodyTitle'）.removeAttr（'style'）； $（this.find（'.leftPanelBodyContent'）.removeAttr（'style'）； });

只需调用对象值$（this），包含$（'.leftPanelBodyTitle'，this）

}).mouseleave（函数（）{ $（this.find（'.leftPanelBodyTitle'）.removeAttr（'style'）； $（this.find（'.leftPanelBodyContent'）.removeAttr（'style'）；

---

});

问题就在这一行

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

此

指向

.leftPanelCarousel

。因此，

$（'.leftPanelBodyTitle'，this）

选择div中的所有

.leftPaneBodyTitle

，并设置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");
    });

---

使用&

问题出在这一行

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

此

指向

.leftPanelCarousel

。因此，

$（'.leftPanelBodyTitle'，this）

选择div中的所有

.leftPaneBodyTitle

，并设置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");
    });

---

使用&

find（）的额外参数在代码中应该是不必要的。好的，

$（this）.find（…）

相当于

$（…，this）

。有人不同意吗？@GregL你是对的，复制粘贴错误。我更喜欢

$（this）.find（）

语法。丹尼尔，我感谢你的帮助，因为我一直在努力解决这一切，但收效甚微。@cshell不客气，我会尽力为你指出正确的方向。你的两个解决方案都突出了所有3段。每个人都很乐于助人，我希望每个人都是对的！

find（）

的额外参数在代码中应该是不必要的。好的，

$（this）.find（…）

相当于

$（…，this）

。有人不同意吗？@GregL你是对的，复制粘贴错误。我更喜欢

$（this）.find（）

语法。丹尼尔，我感谢你的帮助，因为我一直在努力解决这一切，但收效甚微。@cshell不客气，我会尽力为你指出正确的方向。你的两个解决方案都突出了所有3段。每个人都很乐于助人，我希望每个人都是对的！您必须将每2个元素“leftPanelBodyTitle”和“leftPanelBodyContent”包装在一个容器中，比如a或其他什么，然后将目标定为DIVIt。如果不添加一个DIV，它就不能是dont？这可以用JS完成，但您应该只通过CSS完成。JS不适用于这些东西，这就是为什么我们有CSS…为此，您必须更改您的HTML代码。我看不出有什么