1.点击后改变子元素.myclass:active span{ color:#00f;} 此方式在ios下不生效,chrome下正常  2.改变下一个兄弟元素.myclass:active +span{ color:#00f;}…

效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height: 150px; text-align: center; margin: 20px 0; color: #FFF; } .change { font-size: 20px; color: #0cf; } /* 情景一:两个是兄弟元素 */ .box:hover+.change { color: re…

Part.1 问题 我们写页面时也不少遇到这个问题,在没有使用任何预处理语言前提下,当hover 一个元素的时候怎么改变其它的元素? 这里我把它分为两种情况(除自身以外) hover时 1: 改变本身的子元素 2: 改变本身元素的兄弟元素 Part.2 解决 第一种情况最常见也相对好解决: 现在我们假设  class1 为父级元素  class2 为子级元素 HTML <div class="class1"> <div class="class2"…

变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ width: 140px; height: 105px; margin-top: 10px; margin-right: 8px; margin-left: 10px; cursor: pointer; ; box-shadow: 0px 0px 2px 2px #DBDBDB; transition:…

平时遇到CSS属性是不是道理具体兼容哪些网站,就可以直接上这个网站查询啦.http://www.caniuse.com/ 这个是网站地址.  例如查询 inline-block属性兼容性 就可以看到 inline-block属性对于市面上大多数浏览器都是兼容的.对于ie8以上浏览器兼容.…

如果二者是父子关系,可以写成这种: .face:hover .eye-bottom { margin-top: 30px; } 如果是兄弟关系: .face:hover+.ear-wrap { transform: rotate(-30deg); } 如果是兄弟的儿子: .face:hover+.ear-wrap .ear { transform: rotate(-30deg); } 是用css的选择器来实现的.…

…

$('<tr>').data('code', code)        .append(            // 方法            $('<td>').append(playedName)        )        .append(            // 号码列表            $('<td class="code-list">').append(wei+(code.actionData.length>18?(…

需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info,然后进行点击等操作触发事件,或者在控制台trigger元素上的事件,或者dispatchEvent. 这种方法比较繁琐,而且假如触发这个事件之前需要做大量操作,触发时间后需要重新来过,真的是浪费时间啊. 神级操作 今天偶然发现借助Chrome控制台的命令行,可以简单快捷地解决这个问题. 获取事件信息…

需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info,然后进行点击等操作触发事件,或者在控制台trigger元素上的事件,或者dispatchEvent. 这种方法比较繁琐,而且假如触发这个事件之前需要做大量操作,触发时间后需要重新来过,真的是浪费时间啊. 神级操作 今天偶然发现借助Chrome控制台的命令行,可以简单快捷地解决这个问题. 获取事件信息…