关键词：
有时候在做项目的时候会想给一个元素添加一个遮罩效果，然后鼠标划过去的时候，遮罩消失，一般最简单的方法就是使用样式选择器:hover，但是经历过才知道恶心，有种灯泡快要坏的感觉，闪瞎自己的眼睛，于是诞生了解决它的方法，代码如下（图片自己随便找几张，按照路径放进去就可以），开始....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:hover忽闪解决方法</title>
<style>
.col-banner{
position: relative;
overflow: hidden;
transform:skewX(160deg);
width:16.6667%;
float:right;
transform-origin:0 0;
}
.col-banner img{
width: 100%;
}
.bannerDiv{
width:100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/1.jpg">
</div>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/2.jpg">
</div>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/3.jpg">
</div>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/4.jpg">
</div>
<script>
var oCol = document.querySelectorAll(‘.col-banner‘);
var oBanner = document.querySelectorAll(‘.bannerDiv‘);
for(var i=0; i<oCol.length; i++){
oCol[i].index = i;
oCol[i].onmouseover = function(){
oBanner[this.index].style.display = ‘none‘;
};
oCol[i].onmouseout = function(){
oBanner[this.index].style.display = ‘block‘;
}
}
</script>
</body>
</html>
嗯，不错！
关于css（cascadingstylesheets）
CSS规则包含选择器和声明块选择器：选中元素1.元素选择器（h1,p,a,span...）2.id选择器（#选择器名称）唯一的在html中的写法：id=选择器名3.类选择器（.选择器名称）在html中的写法：class=选择器名声明块：出现在大括号中声明块中... 查看详情
hover样式失效的解决方法(代码片段)
...大家都不陌生（:hover用于设置鼠标指向某元素上后显示的样式） 除了常用的hover选择器，还有3个可以和它搭配使用的选择器： :link 设置未被访问页面的链接 :visited 用于设置已被访问的页面链接 :active&... 查看详情
详解css样式选择器都有哪些?
...lass属性，通过类选择器来为具有此class属性的元素设置css样式。类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：同一个元素可以设置多个类，之间用空格隔开：3、ID选择器定义：为HTML标签添加ID属... 查看详情
css
css 层叠样式表修饰网页的 一、css的语法： 1.行内样式的语法 2.内部样式表和外部样式表的语法二、css的使用方式 1.行内样式 2.内部样式表 3.外部样式表 4.外部导入样式三、css选择器 ID选择器 class选择器 标签选择... 查看详情
关于css的相邻兄弟选择器
a和b是相邻兄弟元素，我用a：hover+b能选择到b，b：hover+a却选择不到a是怎么回事？找到原因了：a在左，b在右，解析只能从左往右，从右往左是无法选择到的。参考技术A不光是css顺序，html也是只能从上往下筛选，不能从下往上筛... 查看详情
css实现商城分类导航效果（hover选择器）
...在上面的元素。在鼠标移到元素上时向此元素添加特殊的样式（CSS）。例如：改变鼠标悬停处的元素或其子元素的边框，颜色，大小，显示等。每天积累一点，定会有所进步！<!DOCTYPEhtml><html><head><metacharset="UTF-8" 查看详情
css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关：使用link链入外部样式，页面加载时会同时加载样式@importurl(“*.css”);使用导入式，页面加载完后，才会加载样式 链接伪类的顺序:link->:visited->:hover->:active或者:visited->:link-&g... 查看详情
关于迭代器的for-each遍历集合现象。。。。。
foreahc迭代集合元素的同时修改集合元素抛异常。。ConcurrentModificationException异常只要使用迭代器遍历，其他集合遍历时进行增删操作都需要留意是否会触发ConcurrentModificationException异常。 一、单线程1.异常情况举例只要抛... 查看详情
选择器和权重
1、通配符语法：*{/*样式*/}2、元素选择器语法：div{/*样式*/}3、类选择器语法：.main{/*样式*/}4、id选择器#main{/*样式*/}5、属性选择器：input[type=“text”]{/*样式*/}6、伪类a：link/visited/hover/active点击前/点击后/悬停/点击时li：nth-ch... 查看详情
前端随堂笔录3
5.29复习CSScss层叠样式表修饰网页的 css的语法 1.行内样式的语法 2.内部样式表和外部样式表的语法 css的使用方式 1.行内样式 2.内部样式表 3.外部样式表 4.外部导入样式 css选择器 ID选择器 class选择器 标签选择器 组合选择器 子... 查看详情
关于css选择器优先级无冲突样式设置的展示
如果id和class都设置了同一样式,则显示id选择器的;如果id写的样式和class不冲突,则都会显示.top{ border:1pxsolidblueviolet; width:438px; height:50px; float:left; } #top{ padding-top:15px; height:35px; }<divclass= 查看详情
关于：hover的一点小问题
...了：hover这个伪类选择器，一个小问题搞了我好久，就是关于：hover选择的问题，先看下css代码.box:hoverspan{ height:150px; }接下来是HTML代码<divclass=‘box‘> <span></span></div><divclass="childbox"></div>如果 查看详情
css中父级的hover改变子元素和样式
思想:选择器类似DOM元素选择器,+表示下一级元素，>表示子元素空格代表后代元素<divclass='student'><divclass="name"></div></div>.studentcolor:#ffffff;.student:hovercolor:#000000.student:hover.namecolor:green; 查看详情
css中父级的hover改变子元素和样式
思想:选择器类似DOM元素选择器,+表示下一级元素，>表示子元素空格代表后代元素<divclass='student'><divclass="name"></div></div>.studentcolor:#ffffff;.student:hovercolor:#000000 查看详情
css——链接伪类选择器
a:link链接未被点击过的样式a:visited链接点击过后的样式a:hover链接鼠标经过时样式a:active链接点未松开时的样式 查看详情
css伪类选择器
CSS伪类选择器：给超链接加的样式(链接的不同状态加样式)一个超链接，有四个状态： 正常状态(:link)：鼠标没放上之前链接的样式。 放上状态(:hover)：鼠标放到链接上时的样式。 激活状态(:active)：按住... 查看详情
将非选择器添加到样式会破坏样式
】将非选择器添加到样式会破坏样式【英文标题】：Addingnotselectortostylebreaksstyling【发布时间】：2017-05-2612:53:17【问题描述】：我正在尝试将某种hover样式应用于所有元素除了第一个。出于某种奇怪的原因:first-child有效，但添加:no... 查看详情
css---伪类选择器
伪类选择器的作用：控制标签在不同状态下的样式。标签的四种状态：link：没有访问过的状态；hover：鼠标经过的状态；active：鼠标激活（按下但没有松开）的状态；visited：已经被访问过的状态（鼠标点下且松开）。注意事项... 查看详情