Hover <a> <td> ändern <td> hintergrund Bild
Möchte ich den hintergrund ändern, der <TD>
wenn der Benutzer mit der Maus über einen link <a>
im <td>
Teil meines HTML:
<tr class="menuBarBottomSelected">
<td width="20%">
<a class="menuBarBottomUnselected" href="./url.php">Getting Started</a>
</td>
</tr>
Dies ist mein css:
.menuBarBottomSelected{
background-image: url('/auth/radius/submenu_bg.jpg');
background-repeat: repeat-x;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #ffffff;
border-top:#666666 solid 1px;
}
tr.menuBarBottomUnselected td a:hover{
color:black;
background-image: url('/auth/radius/submenu_bg_hover.jpg');
background-repeat: repeat-x;}
Den html erzeugt wird, also bin ich nicht sicher, warum würden Sie verwenden die gleiche Klasse für den link und den td. Ich war in der Lage, zuzuweisen :bewegen Sie die Maus über den link, sondern nur den hintergrund des Textes verändert nicht die ganze <td>
InformationsquelleAutor Denoteone | 2011-09-15
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie zeigt den link als block und legen Sie Breite und Höhe auf 100%; dies würde füllen Sie Ihren td mit dem anchor-element und jedes pixel des td werden welches als link fungieren soll(Sie können Sie auf Sie). Wenn das ist in Ordnung, dann ist hier die Lösung:
Schauen, z.B. hier: http://jsfiddle.net/mohsen/LnabQ/
Dies funktioniert in jedem browser
Aber wenn Sie nicht wollen, füllen Sie Ihre td mit Anker-tag, dann müssen Sie verwenden JavaScript hinzufügen und entfernen von Klassen, um die
td
. mein wissen kann man nicht habentd:hover
Vielleicht ist dein setup anders ist. Ränder oder... sehen Sie mein Beispiel: jsfiddle.net/mohsen/LnabQ
InformationsquelleAutor Mohsen
Einen Weg, dies zu tun ist mit einem Ereignis. Weisen Sie
onmouseover
auf die<a>
tag, um eine Funktion aufzurufen, dann ändert sich der hintergrund für die übergeordnete<td>
.Randbemerkung: In die Zukunft, eine gute Möglichkeit, dies zu tun mit CSS wäre mit ein :parent selector, der leider derzeit nicht vorhanden.
EDIT: Wenn du dir sicher bist das
<td>
enthält nur die anchor-tag, Sie könnte nur den :hover anwenden, um die<td>
. Dann wechselnden Hintergründen ist kein problem....
Ich bin nicht sicher, es kann getan werden in CSS. Siehe meine Anmerkung. Vielleicht sind einige SO clever-er kann kommen mit etwas, das ist rein CSS. Gibt es vielleicht einen anderen Weg, wenn Sie nicht verheiratet
:hover
auf die<a>
tag. Siehe mein edit.Für jetzt, das wird funktionieren. Ich will nicht auf später Probleme mit <TD>'s, die keine links ändern. Aber danke für das feedback und die Hilfe +1
Du meinst links ändert sich von deaktiviert zu aktiviert, oder ändern Sie die
href
?InformationsquelleAutor Jonathan M
könntest du nicht einfach den hintergrund ändern, der eine wie diese?
InformationsquelleAutor TheRealBillyT