兄弟级别的hover控制

文章摘自:http://blog.csdn.net/cicada_slough/article/details/43305347

这种不通过JS脚本,仅通过CSS实现有两种方法:
1、如果你#b元素是#a元素的子元素,可以直接通过 #a #b {...}这种方式定义CSS样式来控制
2、#a与#b是亲兄弟关系,有相同的父节点,且#b跟#a紧临,可以通过 #a + #b{..}来控制#b里面的元素样式;

下面给出第二种方式的示例:
<style>
    #a {color : #99ff66;}
    #a:hover + #b{color : #FF0000;}
</style>
HTML元素:
<div id=‘a‘>元素1</div>
<div id=‘b‘>元素2</div>
<div id=‘c‘>元素3</div>
如果上面的b与c调换位置则对应的CSS设置将不生效。

时间: 2024-10-22 07:51:31

兄弟级别的hover控制的相关文章

js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps=s.previousSbiling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点 JS获取节点父级,子级元素 先说一下JS的获取方法,其

JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(var i = 0; i < len; i++){ $("input[type='file']").eq(i).click(function(){ $(this).next().val(""); $(this).next().hide(); $(this).css(

jquery点击其他区域,该区域隐藏

大致效果是这样的:点击菜单出现蒙层,点击其他区域,该蒙层隐藏,很常见的一个效果,由于平时写整体的一个布局,写兄弟级用z-index控制就可以实现,这次遇到的情况是该别人的代码,对方代码都分模块了,不好直接加,如图:                                                                       点击非蒙层区域,该区域隐藏:css代码: body{ margin: 0; padding: 0; } .cor{ background: #D

SSAS中CUBE行权限数据级权限控制

原文:SSAS中CUBE行权限数据级权限控制 去年做了一个数据仓库的项目,其中涉及到了CUBE数据级权限的控制.在网上找这方面的资料,找到一个[BI] 通用数据级权限控制解决方案的实现(二):Cube中的角色设置与数据级权限控制.根据这个大牛的思路,做完之后发现有几个问题: 1. 传递给CUBE的用户必须是域用户或者数据库服务器WINDOWS用户.如果BI系统不是用的AD域认证而是传统的FORM认证,那么,BI里的用户需要对应一个WINDOWS用户. 2. 另外的WEB程序里保存对cube的角色

bootstrap中的dropdown组件扩展hover事件

bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap导航条当中dropdown组件用得特别频繁啦! 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. 但想到与其自己来改造,不如

:hover前面有空格和没有空格有不一样的效果

最近在写一些html样式发现:hover前面有空格和没有空格有不一样的效果,:hover前面没有空格,影响的只是该元素的兄弟节点:但是,如果前面有了一个空格,那效果就大大不一样了,有个空格影响的就是 该元素下面的  子节点了. 实例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Documen

基于资源名的MVC权限控制

在程序复杂程度不断上升的过程中,无可避免需要触碰到权限控制,而权限控制又与业务逻辑紧紧相关,市场上出现了大量的权限控制产品,而程序的开发,讲究去繁化简的抽象,在我的开发过程中,逐渐发现程序的权限控制核心不外乎两个方面:1.资源定位:2.访问控制列表.本文主要针对资源定位进行分析,并解决一些我所遇见过的问题.而在MVC上,MVC提供给我们了非常好的访问控制扩展机制,我们能够通过这些机制更好地控制系统权限. 在我们之前的开发中,针对ASP.NET下WebForm进行开发,很多人都采用了继承Page基

css控制显示行数,多出部分显示省略号

webkit-line-clamp:number;控制行数, 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient:vertical;控制文本行数的方向,这是一个 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 . text

FrameWork数据权限浅析2之基于用户级别的中间表机制实现行级数据安全

在上一篇笔记中我已经说了如何利用FM自带的机制配合我们已经通过验证的用户空间的组来实现行级数据安全的控制,但是由于上一个方法存在的缺点是以后如果对该对象增加基于用户或者角色的访问权限就需要开发人员去FM模型添加操作,这样就大大的增加了我们系统的维护成本,下面我们就来说一下另外一种方法:基于用户级别的中间表机制实现行级数据安全 ps:这种方法命名只是笔者的一种定义说法,属个人想法而已,各位千万不要拿来铭记,重要的是过程,至于名字,就让他随风飘吧. 下面我们就走入正题,如何利用基于用户级别的中间表机