我正在尝试实现在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;
}
发布于 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;
}
最后的结果是:
https://stackoverflow.com/questions/54936363
复制相似问题