在此先感谢您的帮助和耐心等待。我对 CSS 比较陌生,之前没有使用过过渡。
这里我有一个简单的 div,带有背景图片和上面的文本 block 。这是添加CSS悬停效果之前的codepin:http://codepen.io/miskellaneousness/pen/vGQoWa
<div class="col bodybox sportsb" style="background-image: url(http://i.imgur.com/Lq76c1G.jpg);">
<h3><a href="generic-article.html" class="hvr-sci">
<span class="singleline">
Kayak or Surfboard?
</span></a>
</h3>
</div>
这是相关的 CSS:
.bodybox {
width: 23.8%;
background-color: #D5DBDB;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 240px;
padding-left: 4px;
color: pink;
background-size: cover;
background-position: -18px;
}
h3 span {
position: relative;
top: 100px;
left: 10px;
width: 100%;
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
不过,当我添加按钮转换 CSS 时,文本消失了。当我滚动文本在 div 中的位置时,按钮效果有效,但文本不可见。这是添加了 CSS 的 Codepen:http://codepen.io/miskellaneousness/pen/RaqXGy
这是添加的 CSS:
.hvr-sci {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-sci:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #f1c40f;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sci:hover:before, .hvr-sci:focus:before, .hvr-sci:active:before {
right: 0;
}
最佳答案
当我将您的 css 添加到 codepen 并删除 overflow:hidden 在 .hvr-sci 上时,它似乎产生了线条效果。我不能 100% 确定这是否是您想要的效果?
关于html - 应用链接悬停效果会使我的链接消失(尽管悬停效果有效)。有什么想法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37013248/