css hover对其包含的元素进行样式设置

<ul class="icon-down-single-arr-li">
	<li>
		<a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a>
	</li>
</ul>

对a链接包含的span图标进行样式更改。

.icon-down-single-arr{
	background-position: -67px -974px;
}
.icon-down-single-arr-li li:hover .icon-down-single-arr{
	background-position: -81px -974px;
}

特别注意第二个css样式的写法。

时间： 2024-10-12 13:48:21

css hover对其包含的元素进行样式设置的相关文章

css hover对其包括的元素进行样式设置

<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul> 对a链接包括的span图标进行样式更改. .icon-down-sing

:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮改变样式: HTML <div id="yanshi"> 演示 </div> CSS #yanshi{ width: 100px; height: 100px; transition: background-color 0.5s,color 0.5s; text-a

checkbox和radio元素的样式设置(简易版)

html代码 //html <div> <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">约吗?</p> <label class="demo--label"> <input class="demo--radio" type="radio" name="demo-radio"

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有很大的关系.排版则主要依靠CSS来设置.调节. 下面说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中) (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css"

css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理

对包含有子元素的元素进行flex后,会影响原有的布局. 例如设置两个div,第一个div包含一个img(图片),第二个div包含多个p元素(对前面的img的说明).如下图 1:当对着两个两个div进行flex布局后.虽然两个div会同时处在一行内.但第二个div内部多个p元素的排序会被打乱,因为p元素的父元素div被应用了display:flex:后,已经改变了其主轴方向,所有的p元素都会横向排列,而不是原来的纵向排列 2:为了让两个div再同一行内,同时第二个div内部的多个p元素仍按照原有的

css中伪类和伪元素的区别

转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before.:after称为伪类.CSS3

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解伪类的分类及作用: 注:该表引自W3School教程伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active 大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

【css笔记(2)】如何给元素应用规则?

css选择器在介绍之前我么你先来看看css大致分为几种选择器: 1.类型选择器(元素选择器) 2.后代选择器(元素的所有后代) 3.伪类(:active, :hover, :focus, :link, :visited, :first-child, :lang) 4.通用选择器(*) 5.子选择器(元素的直接后代) 6.相邻同胞选择器(同一父元素下该元素之后的某元素) 7.属性选择器上面讲的太抽象?没事,举个例子,如下页面1.html结构: <!DOCTYPE html> <html

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”.“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on infor