HTML-Button-Tag-Stil bei Hover

Question

Ich verwende das HTML-Button-Tag, aber der unten erwähnte Stil sollte nur für das oberste Menü gelten und nicht für die anderen Button-Tags auf der Site. Ich habe versucht mit dem Code button.menuButton:hover aber nicht

<button id="menuButton" type="button" name="menuButton" title="Logout"> 
<img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br /><b>Logout</b> 
</button> 

und Anwenden des unten Stil funktioniert, die den unteren Rand zeigen als Grat mit Kalkfarbe und den Rest der Seiten in gestrichelter Modus.

button:hover 
{ 
    border: 1px dashed #CCCCCC; 
    border-bottom: 2px ridge Lime; 
} 

Jede Hilfe wird sehr geschätzt.

Answer 1

Wenn der Stil nur auf bestimmte Schaltflächen angewendet werden soll, sollten Sie eine Klasse nur in diesen Schaltflächen-Tags angeben. zum Beispiel:
Dies ist die Schaltfläche Klasse:

.mybutton 
{ 
    border: 1px dashed #CCCCCC; 
    border-bottom: 2px ridge Lime; 
} 

Und während die Taste erklärt: haben die

<button id="menuButton" type="button" name="menuButton" class="mybutton" title="Logout"> 
    <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br  /><b>Logout</b> 
</button> 

Dieser Button wird nicht:

Mit dieser Taste wird der Stil Stil:

<button id="menuButton" type="button" name="menuButton"title="Logout"> 
     <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br  /><b>Logout</b> 
    </button> 

Answer 2

Wenn Sie button.menuButton:hover verwenden möchten, benötigt Ihre Schaltfläche die .menuButton-Klasse.

In CSS gibt der Punkt (.) An, dass Sie auf einen Klassennamen für ein Element verweisen.