【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

CSS悬停效果实践

最新推荐文章于 2023-04-04 17:14:16 发布

转载最新推荐文章于 2023-04-04 17:14:16 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaofl/p/4202604.html

文章标签：

#前端 #javascript #ViewUI

本文介绍如何使用CSS的:hover选择器实现元素悬停时的视觉变化效果，包括改变背景颜色和大小。适用于按钮、链接等多种元素。

部署运行你感兴趣的模型镜像

:hover所有主流浏览器都支持(IE6.0以下支持不好，以后再学习用Javascript来实现悬停效果)

这是一个绿色底白色Icon的搜索按钮

CSS部分：

#top_search {
    background-color: #24890D;
    border: 16px solid #24890D;
    width: 16px;
    height: 16px;
    float: right;
}

HTML部分：

<div id="top_search"> <img src="images/search.png"/ width="16px" height="16px"> </div>

要实现的悬停效果：绿色背景增加4px宽度，同时绿色背景变浅。这里用到:hover。

div#top_search:hover {
    border:16px solid #2A9E0F;  /*边框颜色*/
    background-color:#2A9E0F;  /*DiV背景颜色*/
    width: 20px;
}

鼠标放到右边可以看到最终效果

同理，这个方法可以应用于<a>标签、<img>标签等。:hover 选择器几乎可用于所有元素。应用于<a>标签时，悬停效果可以是改变字体颜色；应用于<img>标签时，悬停效果可以是改变图片的透明度、尺寸。

转载于:https://www.cnblogs.com/zhaofl/p/4202604.html

您可能感兴趣的与本文相关的镜像

Dify

AI应用

Agent编排

Dify 是一款开源的大语言模型（LLM）应用开发平台，它结合了后端即服务(Backend as a Service) 和LLMOps 的理念，让开发者能快速、高效地构建和部署生产级的生成式AI应用。它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈，并且提供了易用的界面和API，让技术和非技术人员都能参与到AI应用的开发过程中