当鼠标悬停于图片，从图片下端上浮导航文字

要实现这个效果，可以使用CSS中的:hover伪类和transition属性。具体步骤如下：

1. 在HTML中，将图片和导航文字都包装在一个父元素中，如下所示：

<div class="image-container">
  <img src="your-image-url">
  <div class="text-container">
    <a href="#">导航文字</a>
  </div>
</div>

2. 在CSS中，设置父元素的position属性为relative，子元素的position属性为absolute，并将导航文字下移一定距离，如下所示：

.image-container {
  position: relative;
}

.text-container {
  position: absolute;
  bottom: -30px;
  width: 100%;
  text-align: center;
  transition: bottom 0.3s ease;
}

3. 使用:hover伪类，当鼠标悬停在图片上时，将导航文字上浮一定距离，如下所示：

.text-container:hover {
  bottom: 0;
}

这样，当鼠标悬停在图片上时，导航文字就会上浮显示出来。你可以根据需要调整浮动距离和过渡时间。

相关问题

js 鼠标悬停图片显示文字

您可以使用 HTML 的 title 属性结合 JavaScript 来实现鼠标悬停图片显示文字。具体做法是在需要显示文字的图片上添加 title 属性，然后使用 JavaScript 监听鼠标悬停事件，在事件触发时获取图片的 title 属性值，并在页面上显示出来。

以下是一个简单的示例：

<img src="example.jpg" title="这是一个示例图片" onmouseover="showTitle(event)">
<div id="title-box"></div>

<script>
function showTitle(event) {
  // 获取图片的 title 属性值
  var title = event.target.title;
  
  // 显示 title 值
  var titleBox = document.getElementById("title-box");
  titleBox.innerHTML = title;
}
</script>

在这个例子中，当鼠标悬停在图片上时，会触发 showTitle 函数，该函数会从事件对象中获取图片的 title 属性值，并将其显示在页面中 id 为 title-box 的元素内。您也可以根据需要自定义显示效果和位置等。

vue 图片 鼠标悬停 显示文字

要在 Vue 中实现当鼠标悬停在图片上时显示文字的效果，可以使用 Vue 的指令和绑定事件来实现。具体实现步骤如下：

1. 在模板中使用 v-bind 指令将图片的 src 属性绑定到组件的数据属性中。

2. 使用 v-on 指令绑定鼠标悬停事件，当鼠标悬停时触发事件处理函数。

3. 在事件处理函数中修改组件的数据属性，将文字内容保存在数据属性中。

4. 使用 v-if 指令判断鼠标是否悬停在图片上，如果是则显示文字内容，否则隐藏文字内容。

下面是一个简单的示例代码：

<template>
  <div>
    <img v-bind:src="imageUrl" v-on:mouseenter="showText" v-on:mouseleave="hideText">
    <p v-if="show">图片描述</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '图片地址',
      show: false,
    }
  },
  methods: {
    showText() {
      this.show = true
    },
    hideText() {
      this.show = false
    },
  },
}
</script>

在这个示例中，当鼠标悬停在图片上时，会触发 showText 函数，将 show 属性设置为 true，从而显示文字内容。当鼠标离开图片时，会触发 hideText 函数，将 show 属性设置为 false，从而隐藏文字内容。