我想制作一个导航栏，当悬停时，它会添加边框。问题是每次添加/删除边框时，文本都会轻微移动。我能解决这个问题吗?
function toHomePage(){
window.location.replace("...");
};
$(document).ready(function(){
$(".navBar").mouseenter(function() {
$(this).css("border","2px solid black");
}).mouseleave(function() {
$(this).css("border","none");
});
}).navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Help.css">
<title>Help</title>
</head>
<body>
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Help.js"></script>
</body>
</html>无需添加边框，只需更改边框的颜色即可。
function toHomePage(){
window.location.replace("...");
};
$(document).ready(function(){
$(".navBar").mouseenter(function() {
$(this).css("borderColor","black");
}).mouseleave(function() {
$(this).css("borderColor","gainsboro");
});
}).navBar {
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
border: 2px solid gainsboro;
}
#Title {
color: black;
font-family: monospace;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Help.css">
<title>Help</title>
</head>
<body>
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Help.js"></script>
</body>
</html>注意:你也可以使用outline属性，它不会改变盒子的模型。
我相信你有你的理由使用js，但CSS:hover伪类是一个更好的方式来做到这一点。此外，使用HTML锚是一个更好的设备来链接到东西。我把它留在这里是为了繁荣。
.navBar {
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
border: 2px solid gainsboro;
text-decoration: none;
}
.navBar:hover {
border-color: black;
}
#Title {
color: black;
font-family: monospace;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Help.css">
<title>Help</title>
</head>
<body>
<a href="#0" class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</a>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Help.js"></script>
</body>
</html>除了Dominik的答案，您还可以使用box-shadow。
function toHomePage(){
window.location.replace("...");
};
$(document).ready(function(){
$(".navBar").mouseenter(function() {
$(this).css("box-shadow","0px 0px 0px 1px black");
}).mouseleave(function() {
$(this).css("box-shadow","none");
});
}).navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Help.css">
<title>Help</title>
</head>
<body>
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Help.js"></script>
</body>
</html>我认为你只能从下面的例子处理css:
p.solid {border:1px solid transparent;}
p.solid:hover {border:1px solid #0f0;}
<p class="solid">A solid border.</p>
在你的例子中，你可以使用full border-width，但是我们需要添加透明颜色:
function toHomePage(){
window.location.replace("...");
};
$(document).ready(function(){
$(".navBar").mouseenter(function() {
$(this).css("border","2px solid black");
}).mouseleave(function() {
$(this).css("border","2px solid transparent");
});
}).navBar {
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid transparent;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
border: 2px solid gainsboro;
}
#Title {
color: black;
font-family: monospace;
}