hover sur un input bouton dans le css qui ne fonctionne pas

**patricktoulon** · 27/06/2013, 14h38

bonjour a tous

je suis en train de faire une application (hta)

et j'ai un souci avec le mouse over dans le css pour les boutons

en fait ca ne fonctionne pas

voila mon but est de changer la dimention des bordures et autres propriétés sur le bouton au passage de la souris

voila le code qui me pose probleme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
<head>
<style type="text/css" media="screen">
 
<!-- ici c'est le point par ceque je passe par la class car je le meme effet pour X boutons -->
.bouton:hover{
border-width:5px 5px; 
}
<!-- ici c'est un dieze parceque je passe par le ID chaques boutons aura ses propriétés  -->
#bouton1{position:absolute;
left:775px;top:120;width:200;height:41;
background-color:red;color:blue;
border: solid orange;
border-width:1px 1px; 
}
</style>
</head> 
<body>
 <div class='bouton'<input type='button' id='bouton1'   value='bouton1'></input></div>
</body>
</html>

quelqu'un peut me dépanner
merci pour le retour

Au plaisir

**Torgar** · 27/06/2013, 14h47

Salut,

Il n'y a pas de doctype ?

Tu es bien certain que ce code est exact ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class='bouton'<input type='button' id='bouton1'   value='bouton1'></input></div>

Il n'y a rien qui te chiffonne ?

**patricktoulon** · 27/06/2013, 15h10

re
merci pour le retour rapide

pour le doctype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >

ensuite peut etre la balise de la classe qui n'est pas fermée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >
<html>
<head>
<style type="text/css" media="screen">
 
.bouton:hover{
border-width:10px 10px; 
}
#bouton1{position:absolute;
left:775px;top:120;width:200;height:41;
background-color:red;color:blue;
border: solid orange;
border-width:1px 1px; 
}
#bouton1:hover
{
 background-color:blue;
font-size:13px;
font-weight:bold;
border: solid cian;
}
</style>
</head> 
<body>
 <div class='bouton'><input type='button' id='bouton1'   value='bouton1'></input></div>
</body>
</html>

sachant que le formatage au depart fonctionne c'est le hover qui ne fonctionne pas

et je rapelle que le html et css n'est pas mon laguage avec le quel je travaille habituellement

ni par le id et ni par la classe

**patricktoulon** · 27/06/2013, 16h33

re

je viens de l'essayer comme ca tel quel avec chrome et ca fonctionne
mais pas avec IE 9 ni dans un hta
une idée du pourquoi?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >
<html>
<head>
<style type="text/css" media="screen">
#bouton1{position:absolute;
left:775px;top:120;width:200;height:41;
background-color:red;color:blue;
border: solid orange;
border-width:1px 1px; 
}
#bouton1:hover
{
 background-color:blue;
color:white;
font-size:13px;
font-weight:bold;
border: solid orange;
border-width:3px 3px; 
}
</style>
</head> 
<body>
<div class="Mon-Menu">
<input type='button' id='bouton1'   value='bouton1'></input>
</div>
 
</body>
</html>

merci pour le retour

Invité · 27/06/2013, 16h36

Salut,

Tu peux fermer ton input comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" name="Name" id="monID" />

Ce n'est pas le boutton que tu modifies sur le :hover , mais le div conteneur

**patricktoulon** · 27/06/2013, 16h50

merci pour le retour crocotino

mais dans le dernier exemple le imput est bien refermé

le probleme c'est que ca fonctionne avec chrome mais pas IE 9 ou hta

une idée ????

hover sur un input bouton dans le css qui ne fonctionne pas

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager