web-dev-qa-db-fra.com

Afficher le bouton en survol uniquement

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

J'ai 3 images, chacune dans leur propre div à 4 colonnes. J'ai une transition CSS configurée pour que ces images passent de l'échelle de gris à la couleur lorsque la souris de l'utilisateur survole l'image. J'ai maintenant besoin qu'un bouton apparaisse en survol. J'ai joint une image pour illustrer ce que je veux dire.

enter image description here

Et voici un extrait de mon HTML et CSS pour les 4 colonnes du milieu.

--------------------- [~ # ~] 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: J'utilise SCSS, d'où les règles CSS imbriquées et étranges.

htmlcsssass
12
E.Owen

Voici:

.button {
    display: none;
}

img:hover + .button, .button:hover {
    display: inline-block;
}

En faisant cela, nous utilisons le sélecteur css de frère adjacent +. Le sélecteur est assez simple: sur l'image "en vol stationnaire", vous sélectionnez .button (son frère) et affichez-le. Ici, j'ai ajouté .button:hover de sorte que lorsque l'utilisateur "survole" le bouton, il le garde visible (empêche un effet clignotant lorsque l'utilisateur déplace la souris sur le bouton).

15
H4ris

Vous pouvez utiliser un simple img:hover + .button pour sélectionner le lien (le + sélectionne l'élément suivant s'il correspond à .button sélecteur)

.button {
  display: none;
}
img:hover + .button {
  display: inline-block;
}
<div class="small-4 columns">
  <img src="http://placehold.it/350x150">
  <a class="button" href="/jane/">View Jane's Profile</a>
</div>

Sinon, si le bouton n'est pas sur l'image, vous pouvez utiliser :hover sur un élément wrapper, ce qui évite que l'image ne soit plus survolée lorsque vous souhaitez cliquer sur le bouton (le bouton disparaîtrait lorsque vous essayez de cliquer dessus, comme le montre l'exemple ci-dessus)

.button {
  display: none;
}
.wrapper:hover img {
  /* Change the filter in here */
}
.wrapper:hover .button {
  display: inline-block;
}
<div class="small-4 columns">
  <div class="wrapper">
    <img src="http://placehold.it/350x150">
    <a class="button" href="/jane/">View Jane's Profile</a>
  </div>
</div>
8
DBS

Vous pouvez définir la classe sur le conteneur d'images et afficher le bouton lorsque vous survolez le conteneur d'images.

Veuillez vérifier cela lien avec un exemple de travail:

.img-container:hover .button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
2
ArMikael

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 voulez que le bouton soit cliquable et ne disparaisse pas jusqu'à ce que vous supprimiez le déplacement de l'image, utilisez plutôt ce qui suit:

a.button {display: none;}
div.small-4.columns:hover > a.button {display:block;}

EXPLICATION:

a.button est de sélectionner le a avec la classe .button
div.small-4.columns:hover sélection du 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 lui disons d'afficher l'élément enfant qui est a.button, lorsque nous survolons div.small-4.columns

1
Feelsbadman