Question

我正在制作一个有两个cols的web项目（col-md-8和col-md-4，它们分别是post col和sidebar 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代码将GREEN BORDER-LEFT添加到所有三个POSTS ...但我希望它只影响我悬停在上面的div .. 这是我的JQUERY CODE：

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

我将包含它如何影响它的截图注意：我正在使用Domi文本作为帖子，因为我还没有开始BACKEND工作这是结果

的网页屏幕图像

Answer 1

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

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

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

Answer 2

Jquery的方法是

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>

<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>
</div>

＆＃13;

您的代码中的问题是您重复$(".thread")选择器而不是使用$(this），因此您指示Jquery将边框应用于所有匹配的元素当你将它们中的任何一个悬停时选择器。使用$(this)只会将其应用于正在悬停的特定.thread元素

话虽如此，它根本不是一种有效的方法，考虑到只需要一行CSS才能达到同样的效果

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery是（或曾经）一个伟大的工具，但试图将它用于一切绝对是错误的方法

Answer 3

如果你真的想使用jQuery，那么下面的代码：

$(".thread").hover(function(){
    $(this).css("border-left", "2px solid #00cc66");
    }, function(){
    $(this).css("border-left", "2px solid transparent");
});

有关方法hover()如何运作的更多信息 - https://api.jquery.com/hover/

但你可以在没有JQ的情况下使用CSS：

.thread {
    border-left: 2px solid transparent;
}

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

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

3 个答案: