I want to display green border-left on a div on mouseover

Question

I'm making a web project that has two cols (col-md-8 and col-md-4, which are the post col and the sidebar col respectively...) On the post col i've this code

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

So what i want to do is to add a green border-left on the ".thread" div.. but i'm having a problem .. as my jquery code is adding the GREEN BORDER-LEFT to all three POSTS... But i want it to affect only the div i hover on.. This is my JQUERY CODE:

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

I'LL include a screenshot of how it affects it NOTE: I'm using Domi texts for the posts, as i've not started the BACKEND work This is the image of the webpage screenchot of the result

Answer 1

If you really want to use jQuery then the following code:

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

More information on how the method hover() works - https://api.jquery.com/hover/

But you can do without JQ using the CSS:

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

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

Answer 2

A Jquery approach for that would be

$(document).ready(function(){

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

});

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

The problem in your code is that you're repeating the $(".thread") selector instead of using $(this), so you're instructing Jquery to apply the border to all elements that matches the selector when you hover any of them. Using $(this) will apply it only to the particular .thread element being hovered

That being said, it's not an efficient approach at all, considering it would take only a single line of CSS to achieve the same effect

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

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

Jquery is (or has been) a great tool, but trying to use it for everything is definitely the wrong approach

Answer 3

No need for jQuery here. It can/should be achieved with pure CSS. Remove jQuery code and add the following in your stylesheet:

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

So only the hovered .thread div would get the left green border