NewbieLearner NewbieLearner - 1 year ago 92
HTML Question

on('mouseenter')(this).show text in specific div

I've been trying different ways to get this done, none have worked.
Basically what I've been trying is when I hover over "$this"(divOne, divTwo...) div that a text pops up in div "writeToMe". Been at it for a few hours and starting to doubt it's possible, instead of trying further... I thought I'd do this.

I know the jquery below is nonsense, just trying to explain what I'm trying to do.

<div class="writeToMe"></div> //on hover, show text within writeToMe

$(document).ready(function() {

$(document).on('mouseenter', "divOne", function(){
$(writeToMe).text("Today I ate a banana")
})
$(document).on('mouseenter', "divTwo", function(){
$(writeToMe).text("I fell on the stairs when I woke up")
})
$(document).on('mouseenter', "divThree", function(){
$(writeToMe).text("I slept")
})
$(document).on('mouseenter', "divFour", function(){
$(writeToMe).text("Today I woke up")
})
});

H77 H77
Answer Source

Is this what you're after?

$(".writeToMe").mouseenter(function() {
  var txt = null;
  switch (this.id) {
    case "divOne":
      txt = "Today I ate a banana";
      break;
    case "divTwo":
      txt = "I fell on the stairs when I woke up";
      break;
    case "divThree":
      txt = "I slept";
      break;
    case "divFour":
      txt = "Today I woke up";
      break;
  }
  if (txt)
    $(this).text(txt);
});
.writeToMe {
  border: 1px solid grey;
  min-width: 100px;
  min-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne" class="writeToMe"></div>
<div id="divTwo" class="writeToMe"></div>
<div id="divThree" class="writeToMe"></div>
<div id="divFour" class="writeToMe"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download