CSS中图片img的常见效果

本文链接：https://blog.csdn.net/qq_40323256/article/details/128511089

文章介绍了CSS中a标签的四种状态（link,visited,hover,active）及其应用场景，并提供了示例。同时，针对img标签周围出现间隙的问题，建议使用`display:block`来消除间隙。在Vue中，文章提到了用@mouseenter和@mouseleave事件模拟hover效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：css常用知识点_疆~的博客-CSDN博客_border-radius:5px;border:1px solid bluea标签中有四个：link、visited、hover、active未移入a标签链接时：link移入a标签链接时：link、hover点击a标签链接时：link、hober、active点击后未移入a标签连接时：link、visited点击后移入a标签连接时：link、visited、hover点击后再次点击a标签连接时：link、visited、hover、active.....................https://blog.csdn.net/qq_40323256/article/details/103995689

注意：通常div中放img后，img图片周围会出现间隙，此时可通过给img标签添加display: block；消除间隙

例1：


<template>
  <div class="test">
    <img :src="LogoVue" />
    <img :src="LogoVite" />
  </div>

</template>

<script setup lang="ts">
import LogoVue from './assets/vue.svg'
import LogoVite from './assets/vite.svg'

</script>
<style lang="scss" scoped>
.test {
  display: flex;

  img {
    margin-right: 3px;
    cursor: pointer;
    display: block; //消除图片周围间隙
    padding: 5px;
    border-radius: 7px;

    &:hover {
      background-color: rgba(122, 122, 122, 0.117);
    }
  }
}
</style>