將滑鼠懸停在另一個文本上時更改文本顏色-有解無憂

我正在嘗試為我的投資組合制作選單欄，但我不知道如何在將滑鼠懸停在其中一個文本上時更改非懸停文本顏色，我的英語不是很好，所以我做了一點插畫師的例子。

第一張是我想做的，第二張是現在的樣子。

將滑鼠懸停在另一個文本上時更改文本顏色

這是代碼（忽略徽標，它不會出現在代碼上，也不需要更改）：

HTML：

<nav id="menu">

        <ul>
            <li class="boto_menu"><a class="link_menu_works" href="index.html#works">Works</a></li>
        </ul>

        <ul>
            <li class="boto_menu"><a class="link_menu_about" href="index.html#about">About</a></li>
        </ul>

        <ul>
            <li class="boto_menu"><a class="link_menu_newsletter" href="index.html#newsletter">Newsletter</a></li>
        </ul>
    </nav>

CSS：

a {
    text-decoration: none;
}

#menu {
    margin-top: 20px;
    height: 60px;
    background-color: #1a1a1a;
}

.boto_menu {
    list-style: none;
    float:left;
    margin-left:20.4%;
    margin-top: 11px;
    font-family: 'amador';
}
    
.link_menu_works{
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}


.link_menu_about{
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

.link_menu_newsletter{
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

謝謝你們的幫助！我已經快一年沒有編碼了，我幾乎不記得任何東西，所以你的幫助意義重大！<3

uj5u.com熱心網友回復：

添加:hover在你的三個類之后

.link_menu_works:hover {
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}


.link_menu_about:hover {
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

.link_menu_newsletter:hover {
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

uj5u.com熱心網友回復：

您需要在 CSS https://developer.mozilla.org/en-US/docs/Web/CSS/:hover中使用 :hover

沒有必要為每個鏈接分開類。改成一類

例子

.link_menu {
  color: #e1a9ff;
  text-decoration: none;
  font-size: 2em;
}
.link_menu:hover {
  color: #c01313;
}

uj5u.com熱心網友回復：

您可以懸停鏈接容器，而不是單獨的鏈接。

:root {
  text-align: center;
}
.links:hover {
  color: green;
}
.links {
  background: lightgrey;
  display: inline;
  padding: 10px;
}
a {
  margin: 0 10px 0 10px;
  font-size: 20px;
}

<div class="links">
  <a>Link1</a>
  <a>Link2</a>
  <a>Link3</a>
</div>

uj5u.com熱心網友回復：

如果“li”是同一位置的物件，最好放在一個地方。

選擇“a”的顏色代碼作為“滑鼠懸停”之前要顯示的顏色。

如果你使用“:hover”代碼并輸入“滑鼠懸停”時要暴露的顏色代碼，

它將像您附加的影像一樣顯示。

我英語說得不好，所以我用了翻譯。

就算文字不流暢也請諒解：）

ul,li {
    margin: 0; 
    padding: 0; 
    list-style: 0; 
}

a {
    text-decoration: none;
}

#menu {
    margin: 20px 0 0;
    padding: 25px 0; 
    background: #1a1a1a;
}

#menu ul {
    text-align: center; 
    font-family: 'amador';
}
    
#menu ul li {
    display: inline-block;
    margin: 0 20px;
    font-size: 2em;
    color: #e1a9ff;
}
#menu ul li a {
    color: #bcbcbc; 
}
#menu ul li a:hover {
    color: #e1a9ff; 
}

<nav id="menu">
        <ul>
            <li><a href="index.html#works">Works</a></li> 
            <li><a href="index.html#about">About</a></li> 
            <li><a href="index.html#newsletter">Newsletter</a></li>
        </ul>
</nav>

uj5u.com熱心網友回復：

使用 :hover 選擇器

https://www.w3schools.com/cssref/sel_hover.asp

.link_menu_about:hover {
    color: pink;
    text-decoration: none;
    font-size: 2em;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454958.html

標籤：html css

上一篇：在Vue組件中格式化貨幣？

下一篇：CSS未連接到HTMLFlask