纯css实现鼠标移入逐渐高亮

淡淡的烟草味﹌ 2021-09-15 08:52 606阅读 0赞

本例子主要使用transition来实现鼠标移入之后，标签逐渐高亮，存在渐进的过程。具体的做法：将background-color，color等属性，作为一个动画来执行。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>鼠标移入文本高亮显示</title>
    		<style type="text/css">
    			li{
    				width: 400px;
    				list-style: none;
    				line-height: 2rem;
    				color: black;
    				transition: background-color 1s linear,color 1s linear;
    				-webkit-transition: background-color 1s linear,color 1s linear;
    				-moz-transition: background-color 1s linear,color 1s linear;
    				-o-transition: background-color 1s linear,color 1s linear;		
    			}
    			li:hover{
    				background-color: #FF3d67;
    				color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<ul>
    			<li>1.秦时明月之君临天下</li>
    			<li>2.秦时明月之沧海横流</li>
    			<li>3.秦时明月之诸子百家</li>
    		</ul>
    	</body>
    </html>

效果对比

<table>  
 <tbody> 
  <tr> 
   <td><img src="https://img-blog.csdn.net/20180502202055186" alt=""></td> 
   <td><img src="https://img-blog.csdn.net/20180502202108373" alt=""></td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，606人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 88 阅读

相关 css 实现鼠标移入图片显示遮罩层

css 实现鼠标移入图片显示遮罩层代码如下 <!DOCTYPE html> <html> <head> <meta char

约定不等于承诺〃/ 2022年12月29日 06:34/ 0 赞/ 329 阅读

相关 CSS实现--鼠标划入

还是先上效果图，看看是不是大家所需要的这种效果 ![20200921195205894.gif][]没什么过程直接上代码 <!DOCTYPE html> <

骑猪看日落/ 2022年12月09日 03:30/ 0 赞/ 146 阅读

相关【CSS系列】鼠标移入 div图片无缝放大动画

效果图 ![在这里插入图片描述][20200819094826959.png_pic_center] .img { transition: tran

古城微笑少年丶/ 2022年11月29日 03:19/ 0 赞/ 240 阅读

相关 CSS cursor 鼠标移入变图标事件

<table style="border:0px;margin:4px 0px;padding:0px;width:729px;color:rgb(51,51,51);font

爱被打了一巴掌/ 2022年05月24日 05:58/ 0 赞/ 313 阅读

相关鼠标的移入移出事件

一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmou

你的名字/ 2022年05月11日 23:58/ 0 赞/ 687 阅读

相关 JS实现表单隔行换色，鼠标移入高亮

简单的表单鼠标移入前： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

怼烎@/ 2022年04月24日 02:46/ 0 赞/ 334 阅读

相关纯CSS实现鼠标移入显示图标效果

1、效果预览在淘宝或京东商城我们经常看到这样的效果：鼠标移动除某一个位置时出现下拉菜单，或者显示一个图标，那么这是如何实现的呢？我们今天就用CSS来实现鼠标移入时显示图

淩亂°似流年/ 2022年03月07日 07:10/ 0 赞/ 845 阅读

相关 vue实现鼠标移入移出显示或者隐藏div

我的qq 2038373094 效果如下 ![2019050714084878.gif][] -------------------- html代码

叁歲伎倆/ 2022年02月04日 09:23/ 1 赞/ 1792 阅读

相关纯css实现鼠标移入逐渐高亮

本例子主要使用transition来实现鼠标移入之后，标签逐渐高亮，存在渐进的过程。具体的做法：将background-color，color等属性，作为一个动画来执行。

淡淡的烟草味﹌/ 2021年09月15日 08:52/ 0 赞/ 607 阅读