Question

您好，您可以使用自举程序中的自定义导航栏-如何更改其悬停颜色（变为红色）？另外，如果我也想更改文本的实际颜色，该怎么办。我已经尝试过使用CSS进行一些操作，但似乎无济于事。

我已附上以下代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: rgba(0,0,0,0.85); height:50px; font-size:20px;">

  <div class="container">

    <div class="navbar-collapse collapse" id="navbar10">
      <ul class="navbar-nav nav-fill w-100">
        <li class="nav-item">
          <a class="nav-link" href="/index.html">
            <img src="/img/logo.png" alt="Prospex logo" style="width:50px;" />
          </a>
          <li class="nav-item">
            <a class="nav-link" href="#">Vision</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Locations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Upcoming</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

首先从导航元素中删除内联样式。 将它们移动到单独的CSS类，然后将悬停效果的另一条规则添加到同一类。

例如：-

class UserUpdateSerializer(serializers.ModelSerializer):

  email = serializers.EmailField(required=True)

  def validate_username(self, username):
    if User.objects.filter(username=username):
        raise serializers.ValidationError('Username already exists!!')
    return username

  def validate_email(self, email):
    if User.objects.filter(email=email):
        raise serializers.ValidationError('Email already exists!!')
    return email

  class Meta:
    model = User
    fields = ('pk', 'username', 'password', 'email')
    read_only_fields = ('pk',)

或者您可以尝试bootstrap customize

Answer 2

要将.nav-item悬停/焦点样式更改为红色：

.navbar-dark .navbar-nav .nav-item .nav-link:focus,
.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: rgba(0,0,0,0.85); height:50px; font-size:20px;">

  <div class="container">

    <div class="navbar-collapse collapse" id="navbar10">
      <ul class="navbar-nav nav-fill w-100">
        <li class="nav-item">
          <a class="nav-link" href="/index.html">
            <img src="/img/logo.png" alt="Prospex logo" style="width:50px;" />
          </a>
          <li class="nav-item">
            <a class="nav-link" href="#">Vision</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Locations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Upcoming</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </div>
</nav>

Answer 3

使用:hover伪类：

h1 {
  /* default styling */
  text-align: center;
  color: white;
  background-color: #ccc;
  padding: 1em;
  
  /* transition timing */
  transition: all .5s
}

h1:hover {
  /* styling while the mouse is hovering */
  background-color: #333;
  padding: 2em;
}

<h1>
  Hover over me!
</h1>

如何更改引导导航栏的悬停文本

3 个答案: