davej Posted October 2, 2013 Share Posted October 2, 2013 I'm curious. Can you get :hover to affect something you don't seem to be hovering over? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 2, 2013 Share Posted October 2, 2013 Its mainly affects child elements but can affect siblings using + or ~. <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> div {background-color: red;} .hover_trigger:hover + div {background-color: blue;} .hover_trigger2:hover ~ div {background-color: blue;} </style></head> <body><div class="hover_trigger">trigger</div><div class="hover_trigger2">trigger2</div><div>target</div><div>target</div><div>target</div><div>target</div> </body></html> Link to comment Share on other sites More sharing options...
davej Posted October 3, 2013 Author Share Posted October 3, 2013 Yeah, it's sort of the standard dropdown or flyout menu situation, but I've never really thought about how far away the hover could be from the affected element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now