仅在悬停时显示按钮

Posted 2023-03-05

【中文标题】仅在悬停时显示按钮

【英文标题】：Show button on hover only

【发布时间】：2017-04-14 23:10:15

【问题描述】：

我已经阅读并尝试了解决我的问题的其他解决方案，但似乎都没有。

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

这是中间 4 列的 html 和 CSS 的 sn-p。

---------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，则用户无法将鼠标悬停在其上，您的 SCSS 需要这样才能更改显示属性。尝试从 .button 中删除 :hover 并使用它。

@BjornJohnson 不应该在那里！我在取出所有失败的代码时忘记删除它。

【参考方案1】：

给你：

.button 
    display: none;


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

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

【讨论】：

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

【参考方案2】：

给你我的朋友：

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

更新：

如果您希望按钮在从图片中删除移动之前可点击且不会消失，请改用以下内容：

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

解释：

a.button 是选择a 类.buttondiv.small-4.columns:hover 选择div 类.small-4 和.columns（图像的父级）

> 表示 child 和 ~ 表示 sibling，在这种情况下 div.small-4.columns:hover > a.button display:block; 我们告诉它显示子元素 a.button ，当我们将鼠标悬停在div.small-4.columns

【参考方案3】：

您可以使用简单的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>

【参考方案4】：

您可以将类设置为图像容器并在悬停图像容器时显示按钮。

请通过工作示例检查此link：

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

【参考方案5】：

这对我有用： HTML：

                    <div>
                        <div class="hovereffect">
                            <img style="height: 320px; width: 250px" src="xx" >
                            <div class="overlay">
                                <h2>image</h2>
                                <a class="info" href="xxx">open</a>
                            </div>
                        </div>
                    </div>

CSS：

.hovereffect 
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;


.hovereffect .overlay 
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);


.hovereffect img 
    display: block;
    position: relative;
    -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);


.hovereffect h2 
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(-100px);
    -ms-transform: translatey(-100px);
    transform: translatey(-100px);
    -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    padding: 10px;


.hovereffect a.info 
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    margin: 50px 0 0;
    padding: 7px 14px;


.hovereffect a.info:hover 
    box-shadow: 0 0 5px #fff;


.hovereffect:hover img 
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);


.hovereffect:hover .overlay 
    opacity: 1;
    filter: alpha(opacity=100);


.hovereffect:hover h2,
.hovereffect:hover a.info 
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0);


.hovereffect:hover a.info 
    -webkit-transition-delay: .2s;
    transition-delay: .2s;