只使用HTML和CSS实现点亮五角星效果

最新推荐文章于 2023-08-10 11:19:29 发布

酸霉汤

最新推荐文章于 2023-08-10 11:19:29 发布

阅读量1.2k

点赞数

分类专栏： # CSS 文章标签： html css

本文链接：https://blog.csdn.net/iTaylorfan/article/details/118539902

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.点击一个亮一个

点击亮星星

思路：使用链接标签a包裹li，设置li的ID属性，让父级a标签的href属性值为l子级li的ID(锚点)，点击父级a标签触发子级li标签的锚点，再结合:target伪类进行背景图片替换即可实现效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击亮星星</title>
		<style type="text/css">
			ul li {
				list-style: none;
				width: 60px;
				height: 57px;
				background-image: url(img/01.png);
				background-repeat: no-repeat;
				float: left;
			}
			/*在当前li被选中为锚点时触发*/
			ul li:target {
				background-image: url(img/02.png);

			}
		</style>
	</head>
	<body>
		<ul>
			<a href="#a">
				<li id="a"></li>
			</a>
			<a href="#b">
				<li id="b"></li>
			</a>
			<a href="#c">
				<li id="c"></li>
			</a>
			<a href="#d">
				<li id="d"></li>
			</a>
			<a href="#e">
				<li id="e"></li>
			</a>
		</ul>
	</body>
</html>

2.点一个左边五角星全亮，而右边不亮，即评分效果

评分效果

思路：
方法一：采用锚点触发方法，:target伪类触发，让触发的a标签的右边所有弟弟元素(使用~选择器)全替换为不亮状态(默认全亮状态)
方法二：使用单选按钮的 :checked伪类触发，对右边弟弟元素中的label进行内容替换(label和input绑定)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五星好评</title>
		<style type="text/css">
			a::before{
				content: url(img/02.png);
			}
			a:target~a::before{
				content: url(img/01.png);
			}
			
			/* 单选框的方法 */	
			label::before{
				content: url(img/02.png);
			}
			input[type="radio"]{
				display: none;
			}
			input[type="radio"]:checked+label~label{
				content: url(img/01.png);
			}
		</style>
	</head>
	<body>
		<!-- 锚点方法 -->
		<p>锚点的方法</p>
		<a id="a" href="#a"></a>
		<a id="b" href="#b"></a>
		<a id="c" href="#c"></a>
		<a id="d" href="#d"></a>
		<a id="e" href="#e"></a>
		
		
		
		<p>单选框的方法</p>
		<input type="radio"  name="xin" id="ca">
		<label for="ca"></label>
		<input type="radio" name="xin" id="cb">
		<label for="cb"></label>
		<input type="radio" name="xin" id="cc">
		<label for="cc"></label>
		<input type="radio" name="xin" id="cd">
		<label for="cd"></label>
		<input type="radio" name="xin" id="ce">
		<label for="ce"></label>
	</body>
</html>

酸霉汤

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
只使用HTML和CSS实现点亮五角星效果

1.点击一个亮一个思路：使用链接标签a包裹li，设置li的ID属性，让父级a标签的href属性值为l子级li的ID(锚点)，点击父级a标签触发子级li标签的锚点，再结合:target伪类进行背景图片替换即可实现效果。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击亮星星</title> <style type="text/css"&
复制链接

扫一扫