Comment changer l'arrière-plan de la table sur la souris?

Question

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

javascript html mouseover

0

James 11 oct. 2011 à 19:21

Answer 1

Avec: survoler.

Échantillon: http://jsfiddle.net/stKn3/

0

Smamatti 11 oct. 2011 à 15:43

Answer 2

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.

-1

gtiwari333 11 oct. 2011 à 15:39

Answer 3

Avec Css

table:hover
{
    background-color:gray;
}

Ou

table tr:hover
{
    background-color:gray;
}

0

brenjt 11 oct. 2011 à 15:38

Answer 4

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

0

gtiwari333 11 oct. 2011 à 16:25

Comment changer l'arrière-plan de la table sur la souris?

4 réponses

Questions connexes

De nouvelles questions

javascript