div下不同元素同时触发hover效果实现

在同一个DIV下有一个块元素与一个文字标签,要求无论鼠标指向哪个元素另外一个元素也会被激活。可以利用最外层的div元素来选择下面的两个子元素,鼠标指向最外层的div时候触发激活效果。

.sidebox:hover .icon-img1{
    background: url(../img/icon/icon-float11.png) no-repeat center;
}
.sidebox:hover span{
    color:#EFCD50;
}

原文地址:https://www.cnblogs.com/hinux/p/11717326.html

时间: 2024-08-01 21:40:41

div下不同元素同时触发hover效果实现的相关文章

IE下object元素遮挡div表单

目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无法相应,一搜索,确实是这样.那么怎么办呢?万能的搜索啊,终于有两种解决方案: 1,js监听ActiveX控件的行为.(按照网上给的,行不通,监听失败,原因是很多都是10年左右用vc++写的ocx插件的方法,现在行不通) 2,直接通过js控制. 很明显采用第2个方法,于是新的问题就出现了: 怎么调用?

audio标签、HOVER效果、rgba和opacity、隐藏场景

HTML5的audio定义音频流 HTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中. <audio> 和 <video> 两个标记上控制属性的含义: controls : 显示标准的 HTML5 视频/音频播放器控制条.控制按钮. autoplay : 让文件自动播放. loop : 让文件

hover效果加边框不抖动

前两天遇到一个hover效果给整个div加边框的问题. html 如下  <div class="hot-recommend">         <div class="wrapper">             <div class="offer-list">                 <ul class='underline'>                     <li cla

Web页面中5种超酷的Hover效果

hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微 差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果.如下就是要介绍的5个非常酷的纯CSS hover 效果. 1. 向上跳跃 Click Here to Launch

onmouseout,mouseover经过子元素也触发的问题解决方案

在mouseout与mouseover的冒泡问题上,相信有很多朋友都遇到过.今天这里就总结一下 关于mouseover和mouseout冒泡问题的解决方案: 首先,看下event.relatedTarget的用法. relatedTarget 事件属性返回与事件的目标节点相关的节点. relatedTarget不支持IE.对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点. 对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点. 对于其他类型

HTML页面中5种超酷的伪类选择器:hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,

JS子元素oumouseover触发父元素onmouseout

JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父级的onmouseout后又触发onmouseover:从子级移入父级后再次触发父级的oumouseout后又触发onmouseover.而如果onmouseover内又应用了计时器便会存在较大的问题.下面针对此问题给出解决方案. 首先,在给出解决方案之前,必须先弄清楚几个对象及方法,分别如下: 1.事件对象 2.事件对象相关属性(只针对onmouseover及onm

jQuery自定义漂亮的下拉框插件8种效果演示

原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en" class=

父元素onmouseover触发事件在父子元素间移动不停触发的问题

今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center} .container{height: 347px