Zeigen Sie die Schaltfläche nur bei Hover

Question

Ich habe gelesen und versuchte andere Lösungen für mein Problem, aber keine scheint zu funktionieren.

Ich habe 3 Bilder, die jeweils in ihrem eigenen 4-Säulen-div. Ich habe einen CSS-Übergang eingerichtet, so dass diese Bilder von Graustufen zu Farbe verblassen, wenn der Benutzer die Maus über das Bild bewegt. Ich brauche jetzt eine Schaltfläche, die beim Schweben erscheint. Ich habe ein Bild beigefügt, um zu illustrieren, was ich meine.

Und hier ist ein Ausschnitt aus meiner HTML und CSS für die mittleren 4 Spalten.

--------------------- 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; 
    } 
    } 
} 

HINWEIS: ich SCSS verwende, damit die seltsam anmutende, verschachtelte CSS-Regeln.

Answer 1

Hier gehen Sie:

.button { 
    display: none; 
} 

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

Auf diese Weise sind wir den benachbarten Geschwister CSS-Selektor + verwenden. Der Selektor ist ziemlich einfach: Auf dem Bild "Schweben" wählen Sie .button (sein Geschwister) und zeigen es an. Hier fügte ich .button:hover hinzu, so dass, wenn der Benutzer die Schaltfläche "schwebt", sie es sichtbar hält (verhindert einen blinkenden Effekt, wenn der Benutzer die Maus über die Schaltfläche bewegt).

Answer 2

hier gehen Sie meinen Freund:

div.small-4.columns img ~ a {display:none;} 
div.small-4.columns img:hover ~ a {display:block;} 

UPDATE:

wenn Sie die Taste anklickbar zu sein und nicht dissapear, bis Sie den Schritt von dem Bild, Gebrauch entfernen das folgende stattdessen:

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

ERLÄUTERUNG:

a.button ist die a mit Klasse .button
div.small-4.columns:hover Auswählen des div auszuwählen, die beide Klassen .small-4 und .columns (parent of image) hat

> bedeutet Kind und ~ bedeutet Geschwister, in diesem Fall div.small-4.columns:hover > a.button {display:block;} sagen wir es, um das Kindelement anzuzeigen, dasist, wenn wir div.small-4.columns

Answer 3

schweben Sie eine einfache img:hover + .button verwenden könnte den Link (die + wählt das nächste Element, wenn er den .button Selektor entspricht) wählen

.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>

Alternativ, wenn die Die Schaltfläche befindet sich nicht über dem Bild. Sie könnten :hover für ein Wrapper-Element verwenden, wodurch das Problem vermieden wird, dass das Bild nicht mehr verschoben wird, wenn Sie auf die Schaltfläche klicken möchten (die Schaltfläche würde nicht mehr angezeigt) angezeigt, wenn Sie versuchen, es zu klicken, wie im obigen Beispiel zu sehen)

.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>

Answer 4

Sie Klasse an die Bild Container einstellen und die Taste zeigen auf das Bild Container schweben.

Bitte überprüfen Sie diese link mit Arbeitsbeispiel:

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