我有一個共同的問題,我已經開始了一個新專案并且忘記了一些關于 css 的事情。長期以來一直在使用 JS。所以我的問題是創建nav
酒吧。<a>
在欄的左角添加了鏈接作為徽標,在右上角添加了nav
“主頁”、“聯系人”和“產品”等鏈接。并且一直在嘗試添加:hover
徽標鏈接padding: 9px 12px
,但我遇到了問題。當游標在徽標上時,懸停可能會展開 3px 整個導航欄。我應該怎么做才能解決這個問題?嘗試制作更大的導航欄和鏈接,但看起來并不好。抱歉英語不好。例如,我將添加 html 和 css 代碼
a{
text-decoration: none;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(144, 144, 144);
padding: 10px 20px;
}
.nav__logo {
background-color: rgb(208, 208, 208);
padding: 7px 9px;
border-radius: 40px;
}
.nav__logo a {
font-size: 28px;
font-family: 'Great Vibes', cursive;
}
.nav__logo:hover {
background-color: rgb(176, 176, 176);
padding: 9px 12px;
}
.nav__logo-text {
margin: 0;
font-weight: 500;
font-size: 23px;
}
.nav__single-link {
padding: 18px;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 17px;
}
.nav__single-link:hover {
background-color: rgb(208, 208, 208);
border-radius: 12px;
}
<!DOCTYPE html>
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great Vibes&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="nav__logo">
<a class="nav__logo-text" href="./index.html">CampHouse</a>
</div>
<div class="nav__links">
<a class="nav__single-link" href="./index.html">Home</a>
<a class="nav__single-link" href="./products.html">Products</a>
<a class="nav__single-link" href="./contact.html">Contact Us</a>
</div>
</nav>
</body>
</html>
uj5u.com熱心網友回復:
增加的內邊距將整個導航向下推,因為內邊距、邊距和邊框占用空間。無論如何,我想我知道你想要做什么,而不是寫這個:
.nav__logo:hover {
background-color: rgb(176, 176, 176);
transform: scale(1.1, 1.1);
}
這樣,當您將元素懸停時,它會在每個軸上將其視覺大小增加 10%,有關更多資訊,您可以查看Mozilla 的 scale() 檔案
uj5u.com熱心網友回復:
轉到您的一般樣式并為其設定 box-sizing 邊框框
uj5u.com熱心網友回復:
使用transform: scale
而不是padding
on :hover
。在您的示例中,height
由padding
onnav
或其包含的元素確定,例如nav__logo
. 當你增加包含元素的 padding 時,height
onnav
也會增長。
如果您想走這條路線,可以通過添加max-height
on來解決此問題。您也可以直接在 上設定而不是。不過,這里似乎更合適。nav
padding
:hover
a
div
transform: scale
a{
text-decoration: none;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(144, 144, 144);
padding: 10px 20px;
}
.nav__logo {
background-color: rgb(208, 208, 208);
padding: 7px 9px;
border-radius: 40px;
transition: all 1s ease;
}
.nav__logo a {
font-size: 28px;
font-family: 'Great Vibes', cursive;
}
.nav__logo:hover {
background-color: rgb(176, 176, 176);
transform: scale(1.1);
}
.nav__logo-text {
margin: 0;
font-weight: 500;
font-size: 23px;
}
.nav__single-link {
padding: 18px;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 17px;
}
.nav__single-link:hover {
background-color: rgb(208, 208, 208);
border-radius: 12px;
}
<!DOCTYPE html>
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great Vibes&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="nav__logo">
<a class="nav__logo-text" href="./index.html">CampHouse</a>
</div>
<div class="nav__links">
<a class="nav__single-link" href="./index.html">Home</a>
<a class="nav__single-link" href="./products.html">Products</a>
<a class="nav__single-link" href="./contact.html">Contact Us</a>
</div>
</nav>
</body>
</html>
uj5u.com熱心網友回復:
嘗試懸停.nav__logo a:hover
而不是.nav__logo:hover
a {
text-decoration: none;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(144, 144, 144);
padding: 10px 20px;
}
.nav__logo a {
background-color: rgb(208, 208, 208);
padding: 7px 9px;
border-radius: 40px;
font-size: 28px;
font-family: 'Great Vibes', cursive;
}
.nav__logo a:hover {
background-color: rgb(176, 176, 176);
padding: 9px 12px;
}
.nav__logo-text {
margin: 0;
font-weight: 500;
font-size: 23px;
}
.nav__single-link {
padding: 18px;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 17px;
}
.nav__single-link:hover {
background-color: rgb(208, 208, 208);
border-radius: 12px;
}
<!DOCTYPE html>
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great Vibes&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="nav__logo">
<a class="nav__logo-text" href="./index.html">CampHouse</a>
</div>
<div class="nav__links">
<a class="nav__single-link" href="./index.html">Home</a>
<a class="nav__single-link" href="./products.html">Products</a>
<a class="nav__single-link" href="./contact.html">Contact Us</a>
</div>
</nav>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/508199.html