CODEWITHSUNDEEP
jqueryhtmlcss
gdkawb
gdkawb

Reputation: 81

Adding border on mouseover moves content

I want to add a border on mouse over and click but it is moving all the content down whenever it adds the border.

<div class="sections">
    <ul class="sidea">
        <li class="active categoryb"><a href="#">Featured</a>
        </li>
        <li class="categoryb"><a href="#">Most Popular</a>
        </li>
        <li class="categoryb"><a href="#">Recent</a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

CSS

.categoryb {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}
.sections {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.selecteda {
  border: 3px solid black;
  margin: 0;
  padding: 0;
}

JQuery

$('.categoryb').on({
    mouseover: function () {
        $(this).addClass('selecteda');
    },
    mouseleave: function () {
        $(this).not('.selected1a').removeClass('selecteda');
    },
    click: function () {
        $('.categoryb').removeClass('selected1a').not(this).removeClass('selecteda');
        $(this).addClass('selected1a');
    }
});

Live Example: http://jsbin.com/ravavazazo/1/edit?html,css,js,output

Upvotes: 2

Views: 2372

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

This is an alternative solution if you are using a lib and don't want box-sizing.

change 

.selecteda {
  border: 3px solid black;
  margin: 0;
  padding: 0;
}

to

.selecteda {
  box-shadow: 0 0 0 3px black;
  margin: 0;
  padding: 0;
}

or to 

.selecteda {
  box-shadow: inset 0 0 0 3px black;
  margin: 0;
  padding: 0;
}

And note that you don't need Jquery for that just use :hover a full demo would then look like this

.categoryb {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}
.sections {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.sidea {
  list-style-type: none;
}
a:hover {
  text-decoration: none;
}
a {
  text-decoration: none;
}
.categoryb:hover {
  box-shadow: 0 0 0 3px black;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="sections">
      <ul class="sidea">
        <li class="active categoryb"><a href="#">Featured</a>
        </li>
        <li class="categoryb"><a href="#">Most Popular</a>
        </li>
        <li class="categoryb"><a href="#">Recent</a>
        </li>
      </ul>
    </div>
  </body>
</html>

Upvotes: 3

Chris M
Chris M

Reputation: 11

Set the margin to -3px to make room for the border, simple fix.

edit: sorry you must also show the overflow, or you could do a calculation such that the width of the buttons take up 33% minus the three pixels for the border. That or just show the overflow.

http://jsbin.com/kofazaqozi/1/edit?html,css,js,output

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241198

You could add box-sizing: border-box to the elements in order to include the border in the element's width/height calculations. Prior to this, the elements would be occupying more than 100% of the space because 3 * 33% + 6px != 100% (due to the 3px borders on each side that are not included in the element's dimension calculations).

Updated Example

.categoryb {
    float: left;
    width: 33.33%;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    border: 3px solid transparent;
}

You could also add a 3px transparent border around the elements for displacement in order to prevent the element from moving on hover.

Upvotes: 4

Twitch
Twitch

Reputation: 693

Add to mouseover:

$(this).css('width', 'calc(33.33% - 6px)');

and add to mouseleave:

$(this).css('width', '33.33%');

To:

$('.categoryb').on({
        mouseover: function () {
            $(this).css('width', 'calc(33.33% - 6px)');
            $(this).addClass('selecteda');
        },
        mouseleave: function () {
            $(this).css('width', '33.33%');
            $(this).not('.selected1a').removeClass('selecteda');
        },
        click: function () {
            $('.categoryb').removeClass('selected1a').not(this).removeClass('selecteda');
            $(this).addClass('selected1a');
        }
    });

Upvotes: 0

Related Questions