machen bewegen Sie die Maus über <li>Punkt</li> text ändern, Farbe auch... CSS-trick?
Habe ich einige Menü-bars, und in dem moment, ändert sich der Hintergrund zu schwarz, wenn die Maus über ein
<li>content</li>
und der text ändert sich von schwarz nach weiß, wenn es schwebte über.
Muss ich es so machen das der text die Farbe ändert, wenn die ganze <li>content</li>
ist herumtrieb, nicht nur, wenn der text markiert ist.
hier ist der css -
<style type="text/css">
body{margin:0px; font-family:Tahoma, Sans-Serif; font-size:13px;}
/* dock */
#dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%;
z-index:100; background-color:; left:0px;}
#dock > li {width:40px; height:120px; margin: 0 0 1px 0; background-color:#;
background-repeat:no-repeat; background-position:left center;}
#dock #Menu {background-image:url(Menu.png);}
#dock > li:hover {background-position:-40px 0px;}
/* panels */
#dock ul li {padding:5px; border: solid 0px #879b17;}
#dock ul li:hover {padding:5px;
background:#879b17 url(item_bkg.png) repeat-x;
border: solid 0x #879b17;
font-weight: bold;
color: #000;
}
#dock ul li.header, #dock ul li .header:hover {
background:#fff url(header_bkg.png) repeat-x;
border:solid 10px #879b17;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #FFF;
font-weight: bold;
text-align: center;
}
#dock > li:hover ul {
display:block;
color: #FFF;
}
#dock > li ul {position:absolute; top:0px; left:-180px; z-index:-1;width:180px; display:none;
background-color:#fff; border:solid 10px #000; border-top-left-radius: 20px; border-top-right-radius: 20px; padding:0px; margin:0px; list-style:none;}
#dock > li ul.docked { display:block;z-index:-2;}
.dock,.undock{}
.undock {display:none; }
#content {margin: 10px 0 0 60px; }
body,td,th {
color: #333;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
text-align: center;
}
#dock #Menu .free .header .dock {
color: #FFF;
font-weight: bold;
}
#dock #Menu .free .header .undock {
color: #FFFFFF;
}
</style>
und hier ist der HTML -
<li id="Menu">
<ul class="free">
<li class="header"><a href="#" class="dock">DOCK</a><a href="#" class="undock">UN-DOCK</a></li>
<li> </li>
<li class="header">CAMPAIGNS</li>
<li><a href="#">Link Data</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Summary Sheet</a></li>
<li><a href="#">Add New Client</a></li>
<li class="header">LINKS</li>
<li><a href="#">Record Transactions</a></li>
<li class="header">REPORTS</li>
<li><a href="#">Handover Sheets</a></li>
<li><a href="#">Handover Summary</a></li>
<li class="header" >MAINTENANCE</li>
<li><a href="#">Logout</a></li>
<li><a href="#">Manage Users</a></li>
</ul>
</li>
Dank im Voraus, wenn Sie sind in der Lage zu helfen,
Hinsichtlich
Henry
Wie wissen Sie, wenn ein Punkt der Liste "ausgewählt"?
Ich hoffe, das ist ein Ausschnitt des HTML, weil ein
Ich meine nicht ausgewählt, sondern schwebte über
Nicht setzen
Ich hoffe, das ist ein Ausschnitt des HTML, weil ein
<li>
aber innerhalb einer <ul>
- so Ihre #Menu
sollte entweder ein <div>
oder stellen Sie sicher, es ist von innen öffnen und schließen <ul>
Ich meine nicht ausgewählt, sondern schwebte über
li:hover
immer reagiert auf li
wird hover
ed. Stellen Sie sicher, dass Ihre li
ist, wo Sie denken, es ist und hat die Größe, die Sie denken, es hat.Nicht setzen
<a>
- tags um die <li>
- tags, das ist falsch im HTML-Format. Halten Sie es wie du es oben gepostet.InformationsquelleAutor Henry Aspden | 2012-11-05
Du musst angemeldet sein, um einen Kommentar abzugeben.
Würde ich empfehlen, die hover-Arbeit auf die 'A' - Elemente und nicht die LI-Elemente.
Damit die LI-Elemente flly anklickbar müssen Sie die 'A' - element in es auf display:block (oder inline-block) als 'A' - tags display:inline standardmäßig.
SO...
Wassergraben - ich nehme an, es hängt von der Effekt, den Sie möchten, aufrufen.
Haben Sie buchstäblich geben Sie es als 'dsiplay'? Wenn ja das ist falsch, es sollte "Anzeige".
habe es auf der Arbeit... ich bin ein idiot
ja, das war es @BillyMoat haha... ich = Summe der Dusche... vielen Dank für jedermänner Hilfe!!!!!! LEGENDEN !!
InformationsquelleAutor Billy Moat
Fand ich, dass, wenn Sie Polsterung für das "a" anstelle von "li" funktioniert es auch. Durch die Blockierung out der Polsterung können Sie dann bewegen Sie den Mauszeiger über die gepolsterte Fläche innerhalb des div und die "a" - links in die (gepolsterten) hover die Farbe der Ihre eigenen.
InformationsquelleAutor Jayson