hover sans Lien

Version imprimable

hover sans Lien

Hello,

je m'arrache les cheveux pour gèrer un comportement survol sans balise <a>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menuitem
{
    padding: 2px 4px 2px 4px;
    color: #000000;
    text-decoration: none;
    font-family: ms sans serif;
    font-size: 11px;
    font-weight: normal;
    display: block;
    cursor: hand;
    background-color: White;
}
.menuitem:hover{
color: #ffffff;
background-color: red;
}

et dans le html :

Code:

1
2
3
4
5
6
7
8
<div id="R" class="R">
        <div class="menuitem" onclick="OuvrePopup();">
            Créer le Compte-Rendu</div>
        <div class="seperator">
        </div>
        <div class="menuitem" onclick="Congés();">
            Marquer en congés</div>
    </div>

SI quelqu'un pouvait m'aider ! Merci !

Bonjour. Il me semble que IE ne reconnait la pseudo-classe hover que pour une balise <a> donc il vaut mieux faire le hover "à la main" (en javascript quoi)

Dans le html :

Code:

1
2
3
<div class="menuitem" onclick="Congés();" onmouseover="this.style.textColor='white'; this.style.backgroundColor='red';" onmouseout="this.style.textColor='black'; this.style.backgroundColor='white';">
    Marquer en congés
</div>

Mieux:

Code:

1
2
3
<div class="menuitem" onclick="Congés();" onmouseover="this.className='menuItemHover';" onmouseout="this.className='menuItem';">
    Marquer en congés
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menuItem
{
    padding: 2px 4px 2px 4px;
    color: #000000;
    text-decoration: none;
    font-family: ms sans serif;
    font-size: 11px;
    font-weight: normal;
    display: block;
    cursor: hand;
    background-color: White;
}
.menuItemHover{
color: #ffffff;
background-color: red;
}

et pourquoi tu ne veu absoluement pas de <a> ? Surtout que dans ton css il y a tout ce qu'il faut: display:block et texte-decoration:none deja.

Code:

1
2
3
4
5
6
7
8
<div id="R" class="R">
        <a href="#" class="menuitem" onclick="OuvrePopup(); return false;">
            Créer le Compte-Rendu</div>
        <a class="seperator">
        </a>
        <a href="#" class="menuitem" onclick="Congés(); return false;">
            Marquer en congés</a>
    </div>