jquery错误在另一个div上显示div的文本

Question

在我的个人项目中，我试图将鼠标悬停在图像功能上，该图像具有标记为文本的div，以显示在#showHere div上，我认为我已正确实现，但没有任何内容出现，并且很难调试它没有任何显示

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();
});

Answer 1

Your code works fine如果您确定它在DOM is ready之后执行。此外，您在css中的height=50px样式很少，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>

Answer 2

您忘记了.

的item选择器

尝试：

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