在vue.js中悬停时的叠加
在vue.js中悬停时的叠加
提问于 2019-03-01 08:39:50
我正在尝试实现在vue.js中将鼠标悬停在图像上时显示文本，但我有点卡住了。我正在尝试在包含多个图像的数组上实现此示例：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
我得到了一个相当大的vue文件，但下面是它的要点：
模板：
</template>
[...]
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link @mouseover.native="hovertext" :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
</router-link>
</div>
[...]
</template>脚本
<script>
export default {
data() {
return {
info: [
{
id: 1,
title: "Title one",
link: "project1",
hovertext: "project1 hover text lorem lorem lorem",
category_data: {
"1": "Category 1"
}
},
[...]
methods: {
hovertext() {
console.log("");
},我有一些想法，尝试使用一种方法，将文本放在图像下的div中，但在悬停时无法将文本放在图像上方。我不能得到正确的方法...我不确定这是不是一个好的方法，
我还找到了这个代码示例：https://codepen.io/oliviaisarobot/pen/xzPGvY
这非常接近我想要做的事情，但是我也不能在这里显示文本。
我有点迷路了。有帮助吗?如何在vue中做到这一点？
更新-
我想让图像框伸展，这样它们总是适合窗口，但我似乎在我的flexbox行之间有一个间隙，我似乎无法摆脱它。你可以看到空白处。我附上我的样式表。
.list-complete { display: flex; height: auto; flex-direction: row; flex-flow: row wrap; }.list-complete-item {
flex: 0 1 50%;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 100%;
height: auto;
outline: 1px solid #fff;
}
.list-complete-img {
width: 100%;
}
.text {
color: rgb(186, 74, 74);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
height: 60%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #008cba;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 08:53:24
你不需要使用js(vue)事件。使用简单的css，就像你链接到的例子一样。
使用此模板：
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
<div class="overlay">
<div class="text">{{ item.hovertext }}</div>
</div>
</router-link>
</div>并使其更具风格化：
.list-complete-item {
width: 400px;
height: 300px;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 400px;
height: 300px;
}
.list-complete-item a .image {
display: block;
width: 100%;
height: auto;
}
.list-complete-item a .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.list-complete-item a .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}最后的结果是：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54936363
复制相关文章
相似问题
腾讯云开发者
