jquery - 我想在鼠标悬停时在 div 上显示绿色边框

Question

我正在制作一个包含两个列的 Web 元素(col-md-8 和 col-md-4，分别是后列和侧边栏列...)在 post col 我有这段代码

<div class="col-xs-12 col-sm-6 col-md-8">
    <div id="Forumposts">
        <p><big><h2>Forum Threads</h2></big></p>
        <div class="thread-box">
            <div class="thread">
                <h2>Lets see the layout</h2>
                <p>A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it,
                    always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager
                    layouts.</p> <a class="btn btn-large btn-success pull-right" href=""><b>Read More...</b></a> </div>
            <div
                class="thread-info">
                <ul class="info">
                    <li><i class="fa fa-user blogsrite blog-user"></i> John Doe
                        <li><i class="fa fa-calendar blogsrite blog-user"></i> 16 August 218
                            <li><i class="fa fa-folder blogsrite blog-user"></i> PHP
                                <li><i class="fa fa-comments blogsrite blog-user"></i> 10
                </ul>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="thread-box">
        <div class="thread">
            <h2>Lets see the layout</h2>
            <p>A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it, always
                keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.</p>
            <a class="btn btn-large btn-success pull-right" href=""><b>Read More...</b></a> </div>
        <div class="thread-info">
            <ul class="info">
                <li><i class="fa fa-user blogsrite blog-user"></i> John Doe
                    <li><i class="fa fa-calendar blogsrite blog-user"></i> 16 August 218
                        <li><i class="fa fa-folder blogsrite blog-user"></i> PHP
                            <li><i class="fa fa-comments blogsrite blog-user"></i> 10
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="thread-box">
        <div class="thread">
            <h2>Lets see the layout</h2>
            <p>A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it, always
                keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.</p>
            <a class="btn btn-large btn-success pull-right" href=""><b>Read More...</b></a> </div>
        <div class="thread-info">
            <ul class="info">
                <li><i class="fa fa-user blogsrite blog-user"></i> John Doe
                    <li><i class="fa fa-calendar blogsrite blog-user"></i> 16 August 218
                        <li><i class="fa fa-folder blogsrite blog-user"></i> PHP
                            <li><i class="fa fa-comments blogsrite blog-user"></i> 10



            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

所以我想做的是在“.thread”div 上添加一个绿色的border-left。 但我遇到了问题.. 因为我的 jquery 代码正在将绿色边框左添加到所有三个帖子中......但我希望它只影响我悬停的 div.. 这是我的 JQUERY 代码:

$(document).ready(function(){
       $(".thread").mouseover(function(){
              $(".thread").css("border-left", "2px solid #00cc66");
            });
            $(".thread").mouseout(function(){
                $(".thread").css("border-left", "0px solid");
              });
            });

我将附上它如何影响它的屏幕截图注意:我在帖子中使用 Domi 文本，因为我还没有开始后端工作这是结果的网页截图

Answer 1

这里不需要jQuery。它可以/应该用纯 CSS 来实现。删除 jQuery 代码并在样式表中添加以下内容:

.thread:hover{ 
   border-left: 2px solid #00cc66; 
} 

所以只有悬停的 .thread div 会得到左边的绿色边框