CSS实现鼠标移入div后，div内的图片更改

最新推荐文章于 2024-01-23 21:18:47 发布

mfxcyh

最新推荐文章于 2024-01-23 21:18:47 发布

阅读量1.7k

点赞数 2

分类专栏： JavaScript 项目 CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/mfxcyh/article/details/127818836

版权

项目同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 1 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

在项目开发时，遇到一个需求：鼠标移入课程列表的某个小节时，这一小节前面的标识图片会由灰色变成蓝色。

我的处理是，用两个图片，当这个小节没有hover时用灰色的图片，hover该小节时展示蓝色的图片。如图：

实现方法：

<!-- 这个div是课程列表中的一个小节。为这个div绑定类为periodLi -->
<div v-if="item.mainShowType === '1'" 
    class="periodLi" 
    style="width: 100%;" 
    @click="toVideo(item.chapterId)"
>
    <span class="classPeriod" style="float: left" >
        <!--
            everyResult(item.chapterId)是获取进度的方法，
            每个小节不同的进度显示不同的进度图标
        -->
        <a-image :preview="false" 
            style="width: 16px;margin-top: -2px" 
            src="/courseInfo/full.png" 
            v-if="everyResult(item.chapterId) >= 98"
        />
        <a-image :preview="false" 
            style="width: 16px;margin-top: -2px"  
            src="/courseInfo/halfFull.png" 
            v-if="everyResult(item.chapterId) < 98&& everyResult(item.chapterId)>0"  
        />
        <a-image :preview="false" 
            style="width: 16px;margin-top: -2px" 
            src="/courseInfo/empty.png" 
            v-if="everyResult(item.chapterId) === 0" 
        />
        
        <!--
            这个图片是鼠标移入periodLi前，课程小节前灰色的标识符，
            为这个图片绑定chapterVideo类
        -->
        <img class="chapterVideo" 
            style="width: 20px;margin-top:11px;margin-left: 8px"         
            src="/courseInfo/chapterVideo.png" 
        />
        <span style="margin-left: 5px">
            {{everyDict('1')}}：{{items.orderNum}}-{{item.orderNum}}&nbsp;{{item.chapterName}}                    
        </span>
    </span>
</div>

CSS：

//鼠标移入小节时字体变蓝
.periodLi:hover  .classPeriod{
  color: rgb(70,155,255);
}

//鼠标移入小节时修改展示图片的路径
.periodLi:hover .chapterVideo{
  content: url('/courseInfo/chapterVideo2.png');
}

.classPeriod{
  margin-left: 10px;
  line-height: 40px;

  //强制不换行
  white-space: nowrap;

  //最大宽度
  max-width: 67%;
  
  //超出最大宽度时显示省略号
  overflow:hidden;
  text-overflow: ellipsis;
}