两个互不相干的元素。既不是父子也不是兄弟元素，可以进行“鼠标悬浮其中一个元素时另一个元素显示”这种操作吗

Question

1. 如图所示结构，
   现在想鼠标悬浮Img时出现蓝色选中的div，有办法吗

Answer 1

可以参考一下这两个个：
http://stackoverflow.com/ques...
最终效果：http://jsfiddle.net/nz5LG/1/

http://stackoverflow.com/ques...
最终的效果：
http://jsfiddle.net/uWRLr/11/

第一个是HTML+CSS实现的，第二个用了jQuery

Answer 2

用js实现起来比较简单，如果用纯css实现限制条件太多

Answer 3

完全可以呀，这个没有限制的

Answer 4

想要实现：两个互不相干的元素。既不是父子也不是兄弟元素，可以进行“鼠标悬浮其中一个元素时另一个元素显示”

可以明确的说： 不可以；

但是！

你可以利用css 构造一个看起来像是父子关系的布局

除此之外，必须要JS：

oncontextmenu    在用户点击鼠标右键打开上下文菜单时触发     
ondblclick        当用户双击某个对象时调用的事件句柄。    
onmousedown        鼠标按钮被按下。    
onmouseenter    当鼠标指针移动到元素上时触发。    
onmouseleave    当鼠标指针移出元素时触发    
onmousemove        鼠标被移动。    
onmouseover        鼠标移到某元素之上。    
onmouseout        鼠标从某元素移开。    
onmouseup        鼠标按键被松开。
参考： http://www.runoob.com/jsref/dom-obj-event.html

或者用jq：

mousedown()    添加/触发 mousedown 事件
mouseenter()    添加/触发 mouseenter 事件
mouseleave()    添加/触发 mouseleave 事件
mousemove()    添加/触发 mousemove 事件
mouseout()    添加/触发 mouseout 事件
mouseover()    添加/触发 mouseover 事件
mouseup()    添加/触发 mouseup 事件
参考： http://www.runoob.com/jquery/jquery-ref-events.html

最简单：

jQ的 hover方法：该方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
http://www.runoob.com/jquery/...