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>
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
Post a Comment