我有這 3 個三角形，每個三角形都位于導航欄鏈接旁邊。我希望能夠將滑鼠懸停在導航欄鏈接上并使三角形出現在它旁邊。到目前為止，我無法讓它出現，我也不知道為什么。我是 scss 的新手，所以也許這就是我沒有得到它的原因。我不得不使用 visibility: hidden 因為如果我使用 display none，它會帶走必要的邊距。
<!--desktop nav-->
<nav class="navbar-desktop">
<div class="container">
<div class="navbar-menu">
<div class="nav-items">
<img src="./img/neon-pink.png" class="about-bullet">
<a id="about-hover" href="about.html">About</a>
</div>
<div class="nav-items">
<img src="./img/neon-pink.png" class="work-bullet">
<a id="work-hover" href="work.html">Work</a>
</div>
<div class="nav-items">
<img src="./img/neon-pink.png" class="contact-bullet">
<a id="contact-hover" href="#">Contact</a>
</div>
<!--social-->
<div class="social-container">
<a target="_blank" href="https://github.com/"><i
class="fa-brands fa-github-square"></i></a>
<a target="_blank" href="https://www.linkedin.com/"><i
class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>
a {
font-family: $ff-secondary;
text-decoration: none;
color: white;
}
#header {
.navbar-desktop {
.container {
justify-content: end;
.navbar-menu {
display: flex;
justify-content: flex-end;
padding-top: 16px;
font-size: 1.75rem;
.nav-items {
display: flex;
align-items: center;
.about-bullet,
.work-bullet,
.contact-bullet {
width: 24px;
height: 24px;
margin-right: 8px;
transform: rotate(180deg);
visibility: hidden;
}
a {
margin-left: 0;
margin-right: 64px;
text-shadow: 0 0 20px #fff;
}
}
#about-hover:hover .about-bullet {
visibility: visible;
}
.social-container {
margin-right: 16px;
display: flex;
a {
margin: 0 8px;
}
i {
font-size: 2.15rem;
}
}
}
}
}
}
uj5u.com熱心網友回復：
IMG 標簽不是#about-hover 的子標簽，因此懸停在其上沒有任何效果。
懸停需要在nav-items.
a {
font-family: $ff-secondary;
text-decoration: none;
color: #fff;
}
#header {
.navbar-desktop {
.container {
justify-content: end;
.navbar-menu {
display: flex;
justify-content: flex-end;
padding-top: 16px;
font-size: 1.75rem;
.nav-items {
display: flex;
align-items: center;
.about-bullet,
.work-bullet,
.contact-bullet {
width: 24px;
height: 24px;
margin-right: 8px;
transform: rotate(180deg);
visibility: hidden;
}
a {
margin-left: 0;
margin-right: 64px;
text-shadow: 0 0 20px #fff;
}
&:hover {
.about-bullet,
.work-bullet,
.contact-bullet {
visibility: visible;
}
}
}
.social-container {
margin-right: 16px;
display: flex;
a {
margin: 0 8px;
}
i {
font-size: 2.15rem;
}
}
}
}
}
}
uj5u.com熱心網友回復：
你的意思是這樣的？
i {
font-size: 2.15rem;
}
a {
text-decoration: none;
color: white;
text-shadow: 0 0 20px #fff;
background: rgb(189, 184, 184);
}
.container {
justify-content: end;
}
.nav-items {
display: flex;
align-items: center;
gap: 5px;
}
.nav-items:hover .arrow {
visibility: visible;
}
.arrow {
visibility: hidden;
transform: rotate(90deg);
width: 24px;
height: 24px;
}
.navbar-menu {
display: flex;
justify-content: flex-end;
padding-top: 16px;
font-size: 1.75rem;
gap: 10px;
}
.social-container {
margin-right: 16px;
display: flex;
}<nav class="navbar-desktop">
<div class="container">
<div class="navbar-menu">
<div class="nav-items">
<img src="https://svgsilh.com/svg/146916.svg" class="arrow about-bullet" />
<a id="about-hover" href="about.html">About</a>
</div>
<div class="nav-items">
<img src="https://svgsilh.com/svg/146916.svg" class="arrow work-bullet" />
<a id="work-hover" href="work.html">Work</a>
</div>
<div class="nav-items">
<img src="https://svgsilh.com/svg/146916.svg" class="arrow contact-bullet" />
<a id="contact-hover" href="#">Contact</a>
</div>
<!--social-->
<div class="social-container">
<a target="_blank" href="https://github.com/"><i class="fa-brands fa-github-square"></i></a>
<a target="_blank" href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434010.html
上一篇：Python-從URL下載影像