在鼠标悬停时添加边框可移动内容 [英] Adding border on mouseover moves content

问题描述

我想在鼠标上方添加边框并单击，但是只要添加边框，它就会将所有内容向下移动.

<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');
    }
});

实时示例: http://jsbin.com/ravavazazo/1/edit?html,css ，js，输出

解决方案

您可以添加 box-sizing: border-box 以便将border包括在元素的宽度/高度计算中.在此之前，元素将占据超过100%的空间，因为3 * 33% + 6px != 100%(由于每侧的3px边界未包括在元素的尺寸计算中). /p>

更新示例

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

您还可以在元素周围添加3px透明边框以进行位移，以防止元素在悬停时移动.

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

解决方案

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.

这篇关于在鼠标悬停时添加边框可移动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！