javascript - event to modify sibling element -


in web page, have grid of divs. in each div 3 divs, 2nd hidden, want when user hovers on 3rd div, 1st div becomes hidden , 2nd displayed.

i'm using jquery.

<div class="container">   <div class="hello">hello</div>   <div class="who">sailor   </div>   <div onmouseover="whoon();" onmouseout="whooff();" class="hover">hover me</div> </div>  <div class="container">   <div class="hello">hello</div>   <div class="who">dolly   </div>   <div onmouseover="whoon();" onmouseout="whooff();" class="hover">hover me</div> </div>  <div class="container">   <div class="hello">hello</div>   <div class="who">kitty   </div>   <div onmouseover="whoon();" onmouseout="whooff();" class="hover">hover me</div> </div> 

here's codepen

your whoon , whooff methods can combined this:

<div class="container">   <div class="hello">hello</div>   <div class="who">sailor   </div>   <div onmouseover="whoboth(this);" onmouseout="whoboth(this);" class="hover">hover me</div> </div> 

javascript:

function whoboth(target) {   $(target).siblings(".hello, .who").toggle(); } 

Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -