仅在悬停时显示按钮

我已经阅读并尝试了其他解决方案来解决我的问题，但似乎没有任何工作。仅在悬停时显示按钮

我有3个图像，每个在他们自己的4列div。我设置了一个css转换，以便当用户的鼠标悬停在图像上时，这些图像从灰度变为彩色。我现在需要让一个按钮出现在悬停上。我附上了一张图片来说明我的意思。

这里是我的HTML和CSS的中间4列的片段。

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

注：我使用SCSS，因此奇怪的，嵌套的CSS规则。

来源

2016-11-30 E.Owen

我把悬停包装元素上，然后用它来改变图像，并显示该按钮。 – DBS

如果.button最初显示为：none，则用户无法将其悬停在其上，因此SCSS需要显示属性进行更改。尝试从.button中移除：悬停并使用它。 – BjornJohnson

@BjornJohnson不应该在那里！当我把所有失败的代码都拿出来的时候，我忘了删除它。 –

在这里你去：

.button { 
    display: none; 
} 

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

通过这样做，我们使用了相邻的兄弟CSS选择+。选择器非常简单：在图像“悬停”上，选择.button（它的兄弟）并显示它。在这里，我添加了.button:hover，这样当用户“悬停”按钮时，它将保持可见（防止用户将鼠标移动到按钮上时出现闪烁效果）。

来源

2016-11-30 15:06:48 H4ris

按照你的代码打算给OP做任何解释？ –

棒极了。谢谢@ H4ris，这正是我所需要的。 –

在这里你去我的朋友：

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

UPDATE：

，如果你想按钮是点击，而不是dissapear，直到你从图片中，使用去除动改为：

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

说明：

a.button与类.button
div.small-4.columns:hover选择具有两个类和.columns（图像的亲本）

>装置子和~装置同级的div选择a，在这种情况下，div.small-4.columns:hover > a.button {display:block;}我们告诉它显示的子元素是a.button，当我们将鼠标悬停div.small-4.columns

来源

2016-11-30 15:12:38

你可以使用一个简单的img:hover + .button选择连接（+选择下一个元素，如果它的.button选择匹配）

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

或者如果按钮不在图像上方，则可以在包装元素上使用:hover，这样可以避免在想要单击按钮时图像不再徘徊的问题（按钮会丢失出现当您尝试单击它，在上面的例子中看出）

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

来源

2016-11-30 15:14:12 DBS

您可以设置类图像容器，并显示在悬停图像容器的按钮。

请工作示例检查这link：

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

来源

2016-11-30 15:17:05 ArMikael

仅在悬停时显示按钮

回答

相关问题