ホバー効果は、私は私のWebページのW3-CSSを使用しています

a:hover 
 
{ 
 
    text-decoration: none; 
 
    color: #F78888; 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav"> 
 
    <div class="w3-container" style="color: white;"> 
 
     <h3 class="w3-padding-64"><b>No<br>Name</b></h3> 
 
    </div> 
 
    <div class="w3-bar-block w3-padding-8" style="color: white;"> 
 
     <a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Courses</a> 
 
     <a href="exercise.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Exercises</a> 
 
     <a href="rubric.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 active">Rubric</a> 
 
     <a href="mark.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Students</a> 
 
     <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">AnyName</a> 
 
     <a href="contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Contact</a> 
 
     <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Logout</a> 
 
    </div> 
 
</nav>

W3-CSSで動作していません。 'a'要素にホバー効果を適用している間、適用しています。 w3-cssの定義済みのホバー効果を上書きすることはできません。私はマウスを動かしながらテキストの色を変えたい。

出典

2017-12-03 Badhusha

：

を

.w3-button:hover{color:#000!important;background-color:#ccc!important}

カスタムカラーを使用するには、残念ながら!importantを使用して同じ方法で宣言する必要があります。私はそれを助けることができますが、そのスタイルシートはごみですので、私はこれを助言することはありませんので、多くの選択肢を残していないと思います。

以下は、これを示すサンプルです。（私はnavが表示だったので、マークアップはスニップで表示するように取得するためにいくつかの他の非関連のスタイルを追加する必要がありました：なしあなたがそれらを無視することができ

/* For demo only */ 
 
body { 
 
    background-color: #ddd; 
 
} 
 
nav.w3-sidebar.w3-top { 
 
    display:block; 
 
    background-color: #ccc; 
 
} 
 

 

 

 
/* override !important declarations from W3 stylesheet */ 
 
a.w3-button:hover { 
 
    color:red !important; 
 
    background-color:#ccc !important 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav"> 
 
    <div class="w3-container" style="color: white;"> 
 
     <h3 class="w3-padding-64"><b>No<br>Name</b></h3> 
 
    </div> 
 
    <div class="w3-bar-block w3-padding-8" style="color: white;"> 
 
     <a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding-16">Courses</a> 
 
     <a href="exercise.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Exercises</a> 
 
     <a href="rubric.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 active">Rubric</a> 
 
     <a href="mark.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Students</a> 
 
     <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">AnyName</a> 
 
     <a href="contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Contact</a> 
 
     <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Logout</a> 
 
    </div> 
 
</nav>

出典

2017-12-03 14:58:53

は、あなたのスタイルシートで新しいクラス、例えばください：

.myCustomHoverColor:hover { 
    color: #78cc45 !important;  
}

をし、あなたの<a>要素のクラスとして追加します。

ので、あなたの<a>は次のようになります。

<a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Courses</a>´

これが私の仕事：

あなたが使用しているスタイルシートがライン144で、この1を含む !important宣言が散らばっている

<head> 
    <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
    <style> 
     .myCustomHoverColor:hover { 
      color: #78cc45 !important; 
     } 
    </style> 
</head> 

<body> 
    <nav class="w3-sidebar w3-collapse w3-top w3-large" style="background-color: gray; z-index:100;width:210px;font-weight:bold;" id="mynav"> 
     <div class="w3-container" style="color: white;"> 
      <h3 class="w3-padding-64"><b>No<br>Name</b></h3> 
     </div> 
     <div class="w3-bar-block w3-padding-8" style="color: white;"> 
      <a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Courses</a> 
      <a href="exercise.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Exercises</a> 
      <a href="rubric.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 active myCustomHoverColor">Rubric</a> 
      <a href="mark.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Students</a> 
      <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">AnyName</a> 
      <a href="contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Contact</a> 
      <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Logout</a> 
     </div> 
    </nav> 

</body>

出典

2017-12-03 14:49:26 Srax

.w3-hover-white:hover{color:#000!important;background-color:#fff!important} 
 

 

 

 
<a href="course.html" onclick="w3_close()" class="w3-bar-item w3-padding-16 myclass">Courses</a>

。要素から.w3-ホバー白を除去することでとは、自分のユーザ定義のスタイルを与えた。

a:hover 
 
{ 
 
    text-decoration: none; 
 
    background-color: white; 
 
    color: #F78888; 
 
}

出典

2017-12-04 07:05:29 Badhusha

ホバー効果は、私は私のWebページのW3-CSSを使用しています

答えて

関連する問題