Jump to content
davej

:Hover

Recommended Posts

I'm curious. Can you get :hover to affect something you don't seem to be hovering over?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...