CSS :hover effet ne fonctionne pas lorsque j'ai mis un ID à l'alinéa

J'ai le texte suivant css3 transition avec facilité: en effet, les

HTML

<div class="button">     
    <a href="#" onMouseOver="clicksound.playclip()"></a>
    <p id="myId" class="top"></p>            
</div>

CSS

 * {
     padding: 0;
     margin: 0;
 }
 .button {
     width: 180px;
     margin-top: 45px;
 }
 .button a {
     display: block;
     height: 40px;
     width: 180px;
     /*TYPE*/
     color: black;
     font: 17px/50px Helvetica, Verdana, sans-serif;
     text-decoration: none;
     text-align: center;
     text-transform: uppercase;
 }
 .button a {
     background:url(http://imageshack.com/a/img819/761/dqj.gif);
     margin: -50 0 0 0;
     z-index: -1;
 }
  p#myId {
     background: url(http://imageshack.com/a/img854/1921/9ft3.png);
     display: block;
     height: 40px;
     width: 167px;
     margin: -40px 0 0 5px;
     z-index:-1;
     /*TYPE*/
     text-align: center;
     font: 12px/45px Helvetica, Verdana, sans-serif;
     color: #fff;
     /*POSITION*/
     position: absolute;
     /*TRANSITION*/
     -webkit-transition: margin 0.1s ease;
     -moz-transition: margin 0.1s ease;
     -o-transition: margin 0.1s ease;
     -ms-transition: margin 0.1s ease;
     transition: margin 0.1s ease;
 }
 .button:hover .top {
     margin: -67px 0 0 5px;
     line-height: 35px;
 }
 /*ACTIVE*/
 .button:active .top {
     margin: -70px 0 0 5px;
 }

Si je change le p#myId sélecteur de p en CSS, cela fonctionne (le bouton monte sur le vol stationnaire), sinon il ne sera pas.

L'exécution de la démo sur jsFiddle

pouvez-vous mettre une jsFiddle.net ?
Merci pour la réponse, mais désolé, ne voulez pas utiliser de Javascript, sauf si le code est de petite taille (Maximum de 20 ko). Je vais orgazine le code après j'ai corrigé ce problème, merci de souligner ce problème pour moi. Alors... vous savez ce qui se passe ici?
Je n'ai pas suggéré d'utiliser le Javascript. J'ai suggéré à vous préparer un en ligne (minimale) de la démo en jsFiddle, un site qui vous permet de le faire. Mettre HTML, CSS, JS et ainsi de suite et appuyez sur exécuter. Puis appuyez sur Enregistrer, revenez ici et d'ajouter le lien à votre question.
Eh bien, ici, c'est jsfiddle.net/cjTN7
Bon vous avez essayé, mais le résultat n'est pas visible: il ne suffit pas de couper et coller, vous devez utiliser un chemin absolu pour les images, et de s'assurer que tous les css / js nécessaires POUR MONTRER LE PROBLÈME sont mis à la page. Le résultat sera visible dans le coin inférieur droit du carré. Si vos images ne sont pas sur le web, utilisez une autre image prise à partir de google avec la même hauteur, largeur...

OriginalL'auteur 023023 | 2014-02-11

12

Le problème est que le sélecteur de la manipulation de votre :hover comportement a un inférieur Spécificité que la règle pour le comportement par défaut (p#id sélecteur).

La modification de cette
```
.button:hover .top {
```
à ce
```
.button:hover #myId.top {
```
permettra de résoudre le problème: Exemple

Vous pouvez également appliquer un identifiant à un objet parent (permet de " dire <div id="container">), et ensuite utiliser
```
#container .button:hover .top {
```
Un must-read: Les détails sur la Spécificité CSS

Exemples:

Grazie Mille Andrea!
Vous avez un diable de nettoyage dans le code, vous êtes grand! Désolé pour le retard de réponse, je terminais de tester des trucs. Le logo fonctionne très bien maintenant, mais j'ai un autre problème. Le logo est ici lucrebem.com.br, mon problème est le suivant: Ma mise en page est réactif et adsense (en Haut à ad) est également sensible, mais lorsque vous effectuez un zoom dans plus de 200%, l'annonce de disparaître, il doit rester juste en dessous du logo. Ai-je besoin pour ouvrir un nouveau sujet? Je pense que c'est aussi lié à css.
Prego 🙂 Vous n'avez pas accepté la réponse et pourtant, jusqu'à maintenant, vous avez deux problèmes 😀 P. S: Oui, vous devez ouvrir une nouvelle question, car elle est (toujours sur le css, mais) une tout autre question
Accepté! Un grand soutien et guy! Je vais ouvrir un nouveau sujet maintenant.

OriginalL'auteur Andrea Ligios

Vous devez vous connecter pour publier un commentaire.