How to add border but no change to the content position
I am trying to add a border to a div element when the moust is hovering on the div, but I found after the border is aded, the boder will occupy some space and make the content move. See the snippet below. Is it possible to avoid move the content in this case when the border is displayed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test-id').hover(function() {
console.log("test-id");
$('#test-id').css('border', '5px dotted');
},
function() {
$('#test-id').css('border', 'none');
}
);
});
</script>
</head>
<body style="margin-bottom:0px;margin-top:0px;">
<div>
<div style="width: 300px;">
</div>
<div id="test-id">
jfdjkfjdsfjaldsjfsjf
</div&g开发者_JAVA百科t;
</div>
</body>
</html
>
Use CSS 'outline' property instead of border. Which will not occupy element space. Hope will help you.
Try maintaing the border all the time, and just change the color from transparent to whatever color you want it to have when its visible. You could also use a the background color as the "off" color, but that means it has to overly a solid colored element.
Bin ,
Yes border is also cacluated as part of width. So do one thing give a border before itselef with the same color as background , once you mouseover you can change the color , so that it won't push the other ones down.
This is the behavior how the css render.
You need to set the margin to prevent this.
$('#test-id').css('margin', '-5px');
1 Solution is that you make the with: on hover -2px or another one on normal state, with the border color seted to the box color (or background color of the body).
ex 1:
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; }
.container:hover { width: 198px; border: 1px solid #000; }
ex 2: (best solution)
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc
.container:hover { border: 1px solid #000; }
加载中,请稍侯......
精彩评论