Bouton afficher sur le vol stationnaire seulement

J'ai lu autour et essayé d'autres solutions à mon problème, mais aucune ne semble fonctionner.

J'ai 3 images, chacune d'elles au sein de leur propre 4-colonne div. J'ai un css de transition mis en place afin que ces images s'estompent de niveaux de gris à la couleur lorsque l'utilisateur place le pointeur de la souris sur l'image. J'ai maintenant besoin pour obtenir un bouton sur le vol stationnaire. J'ai joint une image pour illustrer ce que je veux dire.

Et voici un extrait de mon code HTML et CSS pour le moyen 4 colonnes.

---------------------HTML---------------------

<div class="small-4 columns">
    <img src="/wp-content/themes/adamslaw/assets/img/woman.png">
    <a class="button" href="/jane/">View Jane's Profile</a>
</div>

---------------------CSS---------------------

.greyish {
background: $smoke !important;
h1 {
    margin: rem-calc(100) 0 0;
}
img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  .button:hover {
    display: inline-block;
    }
  }
}

REMARQUE: je suis en utilisant SCSS, d'où l'étrange allure, imbriqués les règles CSS.

Je mettrais l'passez la souris sur un élément wrapper, puis l'utiliser pour changer l'image et de l'afficher sur le bouton.
Si .le bouton est au départ d'affichage: aucun, il n'y a aucun moyen pour un utilisateur de planer sur elle, que votre SCSS exige pour l'affichage de la propriété à modifier. Essayez de supprimer les :hover .bouton et de jouer avec elle.
cela n'était pas censé être là! J'ai oublié de l'enlever quand j'ai été prendre tout le code échoué.

OriginalL'auteur E.Owen | 2016-11-30

12

Ici, vous allez:
```
.button {
    display: none;
}

img:hover + .button, .button:hover {
    display: inline-block;
}
```
En faisant cela, nous sommes à l'aide de la côté de la fratrie sélecteur css +. Le sélecteur est assez simple: sur l'image "planant", vous sélectionnez .button (son frère) et de l'afficher. Ici, j'ai ajouté .button:hover de sorte que lorsque l'utilisateur "plane" sur le bouton, ça reste visible (éviter un effet de clignotement lorsque l'utilisateur déplace la souris sur le bouton).

La peine de donner une explication à l'OP, à la suite de votre code ?
Superbe. Merci @H4ris, c'est exactement ce dont j'avais besoin.

OriginalL'auteur H4ris
1

ici, vous allez, mon ami:
```
div.small-4.columns img ~ a  {display:none;}
div.small-4.columns img:hover ~ a {display:block;}
```
Mise à JOUR:

si vous souhaitez que le bouton soit cliquable et pas disparaître jusqu'à ce que vous retirez le passage de l'image, utilisez la commande suivante à la place:
```
a.button {display: none;}
div.small-4.columns:hover > a.button {display:block;}
```
EXPLICATION:

a.button est de sélectionner la a avec classe .button

div.small-4.columns:hover la sélection de la div qui a les deux classes .small-4 et .columns (parent de l'image)

> signifie enfant et ~ signifie frère, dans ce cas div.small-4.columns:hover > a.button {display:block;} nous la raconter pour afficher l'élément enfant qui est a.button, lorsque nous avons passez div.small-4.columns

OriginalL'auteur Feelsbadman

Vous devez vous connecter pour publier un commentaire.