CODEWITHSUNDEEP
javascriptjquery
Joel
Joel

Reputation: 6211

Hover to change divs content

How would i create a hover function that displays an image over the entire display-div? Lets say that I would hover over item1, then an image would cover display-div, if i hover over another item, the image within the display-div should change to that. https://jsfiddle.net/urvmgk8e/1/ (not working)

Nav-div          Display-div
--------------  -------------
|            | |            |
| >>item1<<  | |content for |   
|   item2    | |   item1    |   
|   item3    | |            |       
|            | |            |
|            | |            |
|            | |            |
--------------  --------------

Jquery: 

$("a.menu").click(function(e) {
  $('.ShowClickedContent').html($($(this).attr('href')).html()); //Display-div container
});

The problem is that, my jquery function only reacts to click-events. How would i make it so that it would react on mouseOver? enter image description here

Upvotes: 0

Views: 73

Answers (2)

kind user
kind user

Reputation: 41913

Refactored your code a little bit, seems to work fine. Tell me if it's exactly what you want.

$(document).ready(function() {

  $(".menu2").hover(function() {
    $('.showClickedContent').html($($(this).attr('href')).html())
  }, function() {
    $('.showClickedContent').html('')
  });

  $(".parent").find('h2').click(function() {
    $(".c").fadeOut();
    $(".c").eq($(this).index()).fadeIn();

  });

});
a {
  margin: 0 0.3em;
  font-family: "arial";
  text-decoration: none;
}

h2 {
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent' style="background-color:#fff;margin-top:0;padding:0;">

  <h2><a href="#test1" title="test1" class="menu2">test1</a></h2>
  <h2><a href="#test2" title="test1" class="menu2">test2</a></h2>
  <h2><a href="#test3" title="test1" class="menu2">test3</a></h2>

</div>

<div class="showClickedContent" style="background-color:#fff;"></div>

<div id="test1" class='c' style="display:none;background-color:#fff;">
  <h2>test1</h2>
</div>
<div id="test2" class='c' style="display:none;background-color:#fff;">
  <h2>test2</h2>
</div>
<div id="test3" class='c' style="display:none;background-color:#fff;">
  <h2>test3</h2>
</div>

Upvotes: 1

Kallo
Kallo

Reputation: 17

You can use jQuery's hover function or mouseover. I wrote an example by my understanding: http://codepen.io/Kalan/pen/wJpYoL

$("#first").hover(function(){
  $("#display img").css("display","block");
  
},function(){
  $("#display img").css("display","");
  none
  
});
#display img
{
  display: none;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <span id="first">Hover</span>
</div>
<div id="display">
  <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" />
</div>


The .hover function has as parameters two handlers, the first handler is a callback function, which is invoked when you hover over the item and it executes the code, the second is handler out function, which is executed when you unhover the item.

Upvotes: 1

Related Questions