Jump to content



Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...