<a href="javascript:void(0);" onmouseover="this.style.color='yellow';" onmouseout="this.style.color='blue';" onclick="this.style.color= 'red';">链接</a> onmouseout代表a:link onclick代表a:visited onmouseover代表a

1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素“组合的区域”时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的“组合区”域时触发fun1,离开时触发fun2.你也许

chrome中如何查看元素的hover事件 一.总结 一句话总结: Elements->Styles里面可以看到":hov":点开选择":hover"就可以看到元素hover时的样式了 二.chrome 开发者工具,查看元素 hover 样式 转自或参考:chrome 开发者工具,查看元素 hover 样式https://www.cnblogs.com/similar/p/8496610.html 在web开发中,浏览器开发者工具是我们常用的调试工具.我们经常

有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding-top来代替给子元素设置margin-top. 3.内容生成(推荐).代码如下: element(父元素):before{ content:''; display:table; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

元素设置为display:none,虽然该元素从页面中消失了,其绑定的事件仍存在. <body> <button class="button1">change1</button> <button class="button2">change2</button> <button class="button3">change3</button> <div cla

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleSheet 对象代表,它提供了一组属性和方法来操作文档里的样式. 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息. <!DOCTYPE html> <html lang="en"> <head> <meta charse

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleSheet 对象代表,它提供了一组属性和方法来操作文档里的样式. 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息. <!DOCTYPE html> <html lang="en"> <head> <meta charse

<!doctype html><html> <head> <meta charset="UTF-8"> <title>子元素设置margin-top,父元素也受影响</title></head><style type="text/css"> * { margin: 0px; padding: 0px; } .father { width: 500px; height: 8

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> .news { background-color: gray; border: solid 1px black;overf

元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下层元素)设置了宽度并居中. 解决方案: .div1{left:0}即fixed层设置left值为0. 代码如下: <!DOCTYPE html> <html> <head> <title>test</title> <style> *{ma

作者:孙志勇 微博 日期:2016年12月5日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间. 二.背景 在一次开发过程中,对一个元素设置CSS overflow-x: hidden; and overflow-y: visible; ,理想状况下,在X轴超出部分隐藏,Y轴超出部分显示.然而,元素属性并没有生效. 三.原因 根据W3C的说法,如下 The computed values o

>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height能使文字居中,即垂直居中性. 文字的line-heigh可以通过继承也可以使用内联得到(内联优先). 图片的line-height不能居中,放映出的特点是图片底部总是超过行高中垂线6px的距离. 图片的line-height只能通过继承得到,内联设置无效. 同一行的line-height,中垂线对齐(sp

一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时,却是不同的结果. demo 用如下小demo测试: <aside class="container"> <div class="test"> </div> </aside> .container{ position: r

HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什么height:100%不起作用呢? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离.例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度. 而跟W3C的规范,百分比的

关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用line-height=高度,无法居中,发现源码.navbar-brand 设置了 padding: 15px 15px;(默认导航高度为50),于是居中应该是等于高度-30,解决过程中写了几个div用于检测问题,结果遇到了以下问题,经过数小时的研究(时间大多花费在百度与谷歌上,以及研究原因上),于是写

原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <

元素设置disabled属性后便无法向后台传值

子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background: blue; width: 200px; height: 200px; } p{ background: red;

  form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读 <!-- 方法一:简写 --> <input type="text" name="" value="文本框" class="" readonly/> <!-- 方法二:写全 --> <input type="text" name

分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00f; } .content2{ margin-top:10px; } .one{ background-color:#f00; float: left; } .two{ background-color: #3dfeca; } .content1 .one, .content2 .one{ heig