J'ai des onglets, l'un dit «Rechercher» et l'autre, «Balises»
La recherche est l'onglet par défaut, il a donc un arrière-plan de tableau à bords arrondis gris tandis que "Tags" a un arrière-plan à bords arrondis blancs.
Je veux pouvoir passer la souris sur 'Tags' et l'arrière-plan pour passer du blanc au gris. Comment cela se fait-il?
Voici le code HTML:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
Et CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Merci!
James
4 réponses
Essaye ça
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OU
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
ÉDITER:
Essayez ce HTML complet.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
Il a besoin de quelques modifications à utiliser sur votre code. Essayez-le par vous-même.
Avec Css
table:hover
{
background-color:gray;
}
Ou
table tr:hover
{
background-color:gray;
}
Je pense qu'il vaut mieux avoir une seule image comme arrière-plan (avec des coins #comme vous essayez de le faire) des onglets Et changer l'image d'arrière-plan lors de l'événement mouseover. Au lieu de les diviser et de fusionner à nouveau les pièces par des balises div.
Suivez ces exemples:
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.