亮框提示

关注

原创最新推荐文章于 2026-02-27 00:24:02 发布 260 阅读 AI 写同款· GEO 优化 ›

Vue -- 实现弹框提示 & 弹框交互提示 & 上方浮现弹框–不交互 commonConfirm.show(commonConfirm.level.info, jobManagement_I18N.SAVE_SUCCESS); 弹框–交互 commonConfirm.show(commonConfirm.level.warn, jobManagement_I18N.DELETE_AFFIRMED, function(params) { ... 阅读详情

效果图（鼠标经过图片上移，亮度增加，添加盒子阴影以及边框）：

代码：

<template>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style>
li {
  display: inline-block;
  height: 200px;
  width: 150px;
  background: url("../assets/face.png");
  background-size: 100%;
  border: 2px solid transparent;
  border-radius: 5px;
  filter: brightness(0.7);
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 100px;
}
li:hover {
  /* 阴影 */
  box-shadow: 0 0 10px 0 skyblue;
  /* 边框 */
  border: 2px solid skyblue;
  /* 偏移距离 */
  transform: translate(0%, -20%);
  /* 滤镜控制亮度 */
  filter: brightness(1.5);
}
</style>

收录于