Question

现在这是我的主页

当用户将鼠标悬停在图标上时，我使用CSS内容显示了链接文本。但是，现在无论您将鼠标悬停在哪个图标上，它都将显示相同的文本“ home”。我的问题是如何为每个图标/链接设置不同的文本输出。预先谢谢你。

Navbar.html：

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="logo">
            <img src="{% static 'portfolio/logo.png' %}" alt="">   
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-home "></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-cog"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-book"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-tasks"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i  class="fas fa-phone"></i>
            </a>
        </li>
    </ul>
</nav>

_sidebar.scss：

.navbar{
    position:fixed;
    background-color: $navbg;
}

.navbar-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    flex-direction: column;
    align-items:center;
    height: 100%;
}

.nav-item{
    width:100%;
    &:last-child {
        margin-top: auto;
    }
}

.nav-link{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    font-size: 2rem;
    padding:1.5rem;
    text-decoration: none;

    i{
        font-size: 3rem;
        color: $navicon;    
        &:hover{
            color:$icon-hover;
        }    
    }

    &:hover::after{
        content : "Home";
        position: absolute;
        color:#12181b;
        background: #b2becd;
        right:-7rem;
        border-radius: 0.5rem;
        padding:0.5rem;            
        margin-left:2rem;
    }
}

.logo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    width: 100%;
    img{
        width:60%;
    }    
}

Answer 1

您可以在html中使用data属性，并从CSS调用它以获取不同的内容值

  // HTML

    <li class="nav-item">
          <a href="" class="nav-link" data-title="home">
            <i class="fas fa-home"></i>
          </a>
     </li>
     <li class="nav-item">
          <a href="" class="nav-link" data-title="setting">
            <i class="fas fa-cog"></i>
          </a>
     </li>
     ...

// CSS

.nav-link:hover::after {
  content: attr(data-title); // added
  position: absolute;
  color: #12181b;
  background: #b2becd;
  right: -7rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-left: 2rem;
}

Answer 2

使用content并不是将动态内容添加到已编译的SCSS的正确方法。您需要添加另一个元素，使其正常隐藏，并在用户将鼠标悬停在其父元素上时显示它。

通过这种方式，您可以为每个图标静态或动态添加适当的内容，以下是概念证明：

.navbar {
  position: fixed;
  background-color: black;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.nav-item {
  width: 100%;
}

.nav-item:last-child {
  margin-top: auto;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  font-size: 2rem;
  padding: 1.5rem;
  text-decoration: none;
}

.nav-link i {
  font-size: 3rem;
  color: white;
}

.nav-link i:hover {
  color: red;
}

.label {
  display: none;
}

.nav-item:hover .label {
  display: block;
  position: absolute;
  color: #12181b;
  background: #b2becd;
  right: -7rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-left: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

.logo img {
  width: 60%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo"><img src="{% static 'portfolio/logo.png' %}" alt="">

    </li>
    <li class="nav-item">
      <a href="" class="nav-link"><i class="fas fa-home "></i><span class="label">First Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i class="fas fa-cog"></i><span class="label">Second Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i class="fas fa-book"></i><span class="label">Third Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i class="fas fa-tasks"></i><span class="label">fourth Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i  class="fas fa-phone"></i><span class="label">Fifth Icon</span></a></li>
  </ul>
</nav>

如何动态更改导航栏链接的CSS内容

2 个答案: