Why won't my CSS render correctly with jquery .hover()?

Question

I have divs with a common class and a hidden div to show only when said div is hovered over. Depending on the hovered div's ID it should render out a different html string in the target hidden div, append html, unhide and then hide again and clear div on mouseLeave. It seems simple enough, I'm using a switch statement to get the ID of triggering div and render the correct HTML accordingly. Console log shows the correct html string based on my switch statement, however only the last item in the switch statement gets appended to target div.

Full code is here: http://jsfiddle.net/xo1h8quq/

$( document ).ready(function(){

  var buildHtml = function(id) {
    console.log(id);
    var html;
    switch (id) {
      case 'gluten':
        html = '<p>This is why gluten sucks</p>';
      case 'dairy':
        html = '<p>This is why dairy sucks<p>';
      case 'soy':
        html = '<p>This is why soy sucks<p>';
      case 'gmo':
        html = '<p>This is why gmo sucks<p>';
      case 'preservatives':
        html = '<p>This is why preservatives suck<p>';
      case 'fillers':
        html = '<p>This is why fillers suck<p>';
      case 'sugars':
        html = '<p>This is why sugars suck<p>';
    }
    return html;
  };

  $( ".why-out" ).hover(
    function() {
     console.log(this);
      var html = buildHtml(this.id);
      $('#why-out-pop').html('');
      //console.log(html);
      $('#why-out-pop').append(html).removeClass('hide');

    }, function() {
      $('#why-out-pop').html('').addClass('hide');
    }
  );


});

.hide {
  visibility: hidden;
}

#why-out-pop {
  position: absolute;
  margin-top: -158px;
  margin-left: 30px;
  border-style: solid;
  border-width: 3px;
  border-radius: 40px;
  border-color: black;
  background-color: #c3c3c3;
  padding: 10px;
  color: black;
  text-align: right;
  font-weight: light;
  z-index: 1000;
}

.why-out {
  text-align: right;
  font-weight: bold;
}
#out-head {
  text-align: right;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Seester</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="fuck.js"></script>
</head>
<body>
  <div id="out-section">
  <div class="why-out" id="out-head">WHAT'S OUT</div>
  <br/>
  <div class="why-out" id="gluten">Gluten/Grain /OUT</div>
  <br>
  <div class="why-out" id="dairy">Dairy /OUT </div>
  <br>
  <div class="why-out" id="soy">Soy /OUT </div>
  <div class="why-out" id="gmo">GMO's /OUT </div>
  <div class="why-out" id="preservatives">Preservatives /OUT </div>
  <div class="why-out" id="fillers">Fillers /OUT </div>
  <div class="why-out" id="sugars">Refined Sugars /OUT </div>
</div>

<div class="why-out hide" id="why-out-pop">
    <p>This is a test</p>
</div>

<style>


</style>
</body>

Your case statements are missing break;, that's why it falls through to the last case each time. — Tian van Heerden
– Tian van Heerden, Commented Oct 23, 2014 at 8:02

Anton · Accepted Answer · 2014-10-23 08:13:50Z

2

If the text is always going to be the same except for the name (gluten/diary...) you can shorten the code alot by doing this

var buildHtml = function (id) {
    return '<p>This is why ' + id + ' sucks</p>';
};

DEMO

answered Oct 23, 2014 at 8:13

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:57:10Z

2

Try this:

var buildHtml = function(id) {
console.log(id);
var html;
switch (id) {
  case 'gluten':
    html = '<p>This is why gluten sucks</p>';break;
  case 'dairy':
    html = '<p>This is why dairy sucks</p>';break;
  case 'soy':
    html = '<p>This is why soy sucks</p>';break;
  case 'gmo':
    html = '<p>This is why gmo sucks</p>';break;
  case 'preservatives':
    html = '<p>This is why preservatives suck</p>';break;
  case 'fillers':
    html = '<p>This is why fillers suck</p>';break;
  case 'sugars':
    html = '<p>This is why sugars suck</p>';break;
   }
   return html;
 };

You are not closing your <p> Tags, and you missed the break Part in every Switch Statement. If you dont Break the case, every following case gets executed to. ~~Stupid behaviour if you ask me...~~

On Information why it can be useful not to have a break read this

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Oct 23, 2014 at 8:04

Shaeldon

8814 gold badges18 silver badges28 bronze badges

4 Comments

user1017882 Over a year ago

Why is it stupid behaviour? Falling through to the next case is desirable in many scenarios.

Shaeldon Over a year ago

@DeeMac well i agree after reading up to add another edit i have to agree.

lacostenycoder Over a year ago

@anton Thank and you're correct, however this is dummy text. The actually text will be different. But good point none the less.

lacostenycoder Over a year ago

@Shaeldon the break was exactly what was missing! Thanks!

Collectives™ on Stack Overflow

Why won't my CSS render correctly with jquery .hover()?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related