Wie ändere ich den gesamten Hintergrund des Links, wenn er gescrollt wird und nicht nur den Text?

Ich versuche es so zu machen, dass die gesamte Länge des Links die Hintergrundfarbe ändert, aber nur der Hintergrund hinter dem Text.Wie ändere ich den gesamten Hintergrund des Links, wenn er gescrollt wird und nicht nur den Text?

Die html ist unten:

<DOCTYPE! HTML> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="dropdwn.css"> 
</head> 

</body> 

    <div class="dropdown"> 
     <h1><a href="#">Dropdown Box</a></h1> 

      <ul class="content"> 
       <li><a href="#">List Item</a></li> 
       <li><a href="#">List Item</a></li> 
       <li><a href="#">List Item</a></li> 
      </ul> 

    </div> 

</body> 
</html>

Die CSS unten ist, ich die Polsterung auf viele Klassen zu ändern versucht haben, aber kann nicht scheinen, es o zu bekommen. Vielen Dank für all hilfreich resposes :)

body { 
} 

.dropdown { 
    position: absolute; 

} 

.dropdown h1 { 
    background-color: #62dbfc; 
    font-family: "calibri light"; 
    padding: 15px 35px; 
    margin: 0 auto; 
    font-size: 36px; 

} 
.content { 
    display: none; 

} 

.dropdown ul { 
    margin: 0 auto; 
    position: absolute; 
    width: 100%; 
    padding-left: 0; 
} 

.dropdown li { 
    list-style-type: none; 
    background-color: #ededed; 
    margin: 0 auto; 
    font-family: calibri; 
    text-align: center; 
    padding: 15px 0px; 

} 

.dropdown a { 
    text-decoration: none; 
    color: black; 
    font-size: 36px; 

} 

.dropdown:hover .content { 
    display: block; 
} 

.content a:hover { 
    background-color: #c4c4c4; 

}

Quelle

2017-05-01 AbuN2286

ändern, was Sie Ihre :hover zu werden Befestigung und es soll das gesamte li Element markieren.

.content li:hover { 
    background-color: #c4c4c4; 

}

Quelle

2017-05-01 19:36:32 jmargolisvt

danken Ihnen sehr viel !!! – AbuN2286

-1

Versuchen Sie, "li" Hintergrundfarbe statt "a" zu ändern. Sie JQuery verwenden können

$(".li_class").mouseover(function(){ 
 
    var color = $(this).css("background-color"); 
 
    $(this).css("background", "#your color"); 
 
    $(this).mouseout(function(){ 
 
    $(this).css("background", color); 
 
    } 
 
}

Quelle

2017-05-01 19:41:54

Es ist nicht notwendig, JQuery zu verwenden, wenn all dies in einer CSS-Regel durchgeführt werden kann. – jas7457

Wie ändere ich den gesamten Hintergrund des Links, wenn er gescrollt wird und nicht nur den Text?

Antwort

Verwandte Themen