首页 > 其他分享 >前端011-hover

前端011-hover

时间:2022-11-19 16:47:34浏览次数:49  
标签:hover color 前端 当鼠标 011 background image

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
.menu{
width: 100px;
background-color: #9a9a9a;
line-height: 200px;
float: left;
margin: 0 1px;
}
/*当鼠标移动到当前标签上时,以下css属性才生效*/
.menu:hover{
background-color: #77a9f9;
}
</style>
</head>
<body style="width: 980px;margin: 0 auto;text-align: center">
<div style="height: 200px;background-color: #e75e15">
<div class="menu">第一章</div>
<div class="menu">第二章</div>
<div class="menu">第三章</div>
<div style="clear: both"></div>
</div>
<h3>当鼠标移动到当前标签上时,hover属性才生效</h3>
<h3>background-image:url('image/4.gif'); # 默认,div大,图片重复放</h3>
<h3>background-repeat: repeat-y --y轴重复铺开;</h3>
<h3>background-position-x:定位背景图的x轴位置;</h3>
<h3>background-position-y:定位背景图的y轴位置;</h3>
</body>
</html>

标签:hover,color,前端,当鼠标,011,background,image
From: https://www.cnblogs.com/lfyxys/p/16906382.html

相关文章

  • 前端010-overfloat
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>overfloat</title></head><bodystyle="width:980px;margin:0auto;"><h3>overflow:......
  • 前端009-opacity-z-index
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>opacity</title><style>.c1{margin:0auto;width:10......
  • 前端面试题:移动端和PC端的区别?
    移动端与PC端主要的区别其实是兼容问题;移动端开发主要考虑的就是分辨率的适配,和不同操作系统的差异化。还有就是移动端的布局自适应;解决布局适应的方法有:rem,em,vw,v......
  • Windows下开发环境的搭建(前端vue后端java)
    0.下载或拷贝jdk(目前项目使用的版本包括1.6,1.7,1.8,11),配置Java环境变量:新建系统变量JAVA_HOME和CLASSPATH变量名:JAVA_HOME变量值:C:\ProgramFiles\Java\jdk1.7.0......
  • 前端008-position-2
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>position-relative</title></head><bodystyle="width:1080px;margin:0auto"><h3>12-......
  • 【vue】后端接口返回了在预览中展示的png(二进制流)如何展示在前端页面?
    代码created(){axios({url:"http://localhost:8080/img/getimg",responseType:"blob",//关键}).then((res)=>{letdata=newBl......
  • 微前端之四 • Single SPA 的源码实现
    深入了解一个库最好的办法是直接去看源代码,学习作者的设计模式、运行原理、代码风格等。并且动手跑起来,碰到不懂的地方打断点或者打印关键信息,一步一步去琢磨。很多流行库......
  • 前端007-css-position
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>positio</title><style>.navigator{height:100px;wi......
  • 前端优化
    web前端设计优化准则: 1 减少http请求次数,考虑:css,js,图片,,, 2采用CDN 3针对css,js,图片进行缓存,添加Expires头 4对cssjs进行gzip压缩 5将css放置顶部(head) 6将......
  • 前端面试题:如何进行前端的性能优化?
    一、DOM层面的优化1.减少重绘和重排2.使用事件委托3.函数的防抖与节流4.requestAnimationFrame(),将数据进行分割,分批次渲染,减少JS的连续运行时间......