Question

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

我有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规则。

Answer 1

你走了：

.button {
    display: none;
}

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

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

Answer 2

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

＆＃13;

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

＆＃13;

<div class="small-4 columns">
  <img src="http://placehold.it/350x150">
  <a class="button" href="/jane/">View Jane's Profile</a>
</div>

＆＃13;

或者，如果按钮不在图像上，您可以在包装元素上使用:hover，这可以避免在您想要单击按钮时按钮（图像不再悬停）的问题当你试图点击它时会消失，如上例所示）

＆＃13;

.button {
  display: none;
}
.wrapper:hover img {
  /* Change the filter in here */
}
.wrapper:hover .button {
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 3

在这里，你去找我的朋友：

      <application>
        ....
        <service android:name=".MyTaskService" android:enabled="true" android:label="MyTaskService" />
      </application>

更新：

如果您希望按钮可点击而不是消失，直到您从图片中删除移动，请改用以下内容：

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类 .button选择同时包含div.small-4.columns:hover和div（图片的父级）的.small-4

.columns表示孩子，>表示兄弟，在这种情况下~我们告诉它显示当我们悬停div.small-4.columns:hover > a.button {display:block;}

时，a.button的子元素

Answer 4

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

请使用工作示例检查此link：

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

Answer 5

这对我有用： HTML :

double

CSS：

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

仅在悬停时显示按钮

5 个答案: