仅在悬停时显示按钮
我已经阅读并尝试了其他解决方案来解决我的问题,但似乎没有任何工作。仅在悬停时显示按钮
我有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规则。
在这里你去:
.button {
display: none;
}
img:hover + .button, .button:hover {
display: inline-block;
}
通过这样做,我们使用了相邻的兄弟CSS选择+
。选择器非常简单:在图像“悬停”上,选择.button
(它的兄弟)并显示它。在这里,我添加了.button:hover
,这样当用户“悬停”按钮时,它将保持可见(防止用户将鼠标移动到按钮上时出现闪烁效果)。
按照你的代码打算给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
你可以使用一个简单的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>
您可以设置类图像容器,并显示在悬停图像容器的按钮。
请工作示例检查这link:
.img-container:hover .button {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
text-align: center;
}
我把悬停包装元素上,然后用它来改变图像,并显示该按钮。 – DBS
如果.button最初显示为:none,则用户无法将其悬停在其上,因此SCSS需要显示属性进行更改。尝试从.button中移除:悬停并使用它。 – BjornJohnson
@BjornJohnson不应该在那里!当我把所有失败的代码都拿出来的时候,我忘了删除它。 –