jquery error displaying text of div on another div

On my personal project I am trying to make hover over function of image which has a div labeled as text to display on the #showHere div, which I thought i implemented correctly, but nothing is coming out and it is hard to debug it without anything showing

html

<div id="content">
    <div id="content-left">
        <div id="showHere"></div>
    </div>

    <div id="content-right">

        <div class="item">
            <img src="guns/Rusty.png" />
            <div class="text"> rusty </div>
        </div>
    </div>
</div>

css

    .container{
    margin-left: 0;
    margin-right: 0;
    padding:0 0 0 0;
    width: 100%;
    }


#content{

overflow: auto;
background-color:#FFFFFF;
margin-left: 0;
margin-right: 0;
}

#content-left{
color: #FFFFFF;
float:left;
background-color:#333333;
width: 25%;
height = 300px;
width = 50px;
}

#content-right{
color: #FFFFFF;
float:right;
background-color:#666666;
width: 75%;
height = 300px;
width = 50px;
}
.text{
display: none;
}

#showHere{
    background-color: white;
}    

Jquery/javascript

$(".item").hover(function () {
    "use strict";
    var data = $(this).find(".text").html();
    $("#showHere").hide().stop().html(data).fadeIn();
}, function () {
    "use strict";
    $("#showHere").fadeOut();
});

Answers 1

  • Your code works fine if you make sure it execute after DOM is ready. Also you have few styles likeheight=50px in css which should be height:50px

    $(function() {
      $(".item").hover(function() {
        "use strict";
        var data = $(this).find(".text").html();
        $("#showHere").hide().stop().html(data).fadeIn();
      }, function() {
        "use strict";
        $("#showHere").fadeOut();
      });
    });
    .container {
      margin-left: 0;
      margin-right: 0;
      padding: 0 0 0 0;
      width: 100%;
    }
    
    #content {
      overflow: auto;
      background-color: #FFFFFF;
      margin-left: 0;
      margin-right: 0;
    }
    
    #content-left {
      color: #FFFFFF;
      float: left;
      background-color: #333333;
      width: 25%;
      height: 300px;
      width: 50px;
    }
    
    #content-right {
      color: #FFFFFF;
      float: right;
      background-color: #666666;
      width: 75%;
      height: 300px;
      width: 50px;
    }
    
    .text {
      display: none;
    }
    
    #showHere {
      background: red;
      border: 1px solid;
      height: 50px;
      width: 200px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="content">
      <div id="content-left">
        <div id="showHere"></div>
      </div>
    
      <div id="content-right">
    
        <div class="item">
          <img src="guns/Rusty.png" />
          <div class="text">rusty</div>
        </div>
      </div>
    </div>


Related Articles