jQuery: Issues with combined click and hover functions

Question

My webpage looks like that at the moment:

// Hover Function

$("#cats_image").mouseover(function() {
  $("h1").text("Cats");
});

$("#dogs_image").mouseover(function() {
  $("h1").text("Dogs");
});

$("#ducks_image").mouseover(function() {
  $("h1").text("Ducks");
});

$("img").mouseout(function() {
  $("h1").text("Animals");
});


// Click Function

$("#cats_image").click(function() {
  $("h1").text("Cats");
  $("footer div").removeClass("show");
  $("#cats_text").addClass("show");
});

$("#dogs_image").click(function() {
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#dogs_text").addClass("show");
});

$("#ducks_image").click(function() {
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#ducks_text").addClass("show");
});

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: normal;
}

header {
  width: 100%;
}

main {}

img {
  max-width: 200px;
  cursor: pointer;
}

footer div {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Animals</h1>
</header>

<main>
  <img id="cats_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Mackerel_tabby_cat_pair-Hisashi-01.jpg">
  <img id="dogs_image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Two_puppies_dogs.jpg">
  <img id="ducks_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/The_pair_of_ducks.jpg">
</main>

<footer>
  <div id="cats_text">Domestic cats are valued by humans for companionship and their ability to hunt rodents.</div>
  <div id="dogs_text">The coats of domestic dogs are of two varieties: "double" being familiar with dogs (as well as wolves) originating from colder climates, made up of a coarse guard.</div>
  <div id="ducks_text">Duck is the common name for numerous species in the waterfowl family Anatidae which also includes swans and geese.</div>
</footer>

The hover function looks perfect at first glance. But if you click for example one image, the title ("Cats", "Dogs", or "Ducks") should stay there, as long as you don't click another image. If you click in a white area (outside the images, and the text areas), it should look like nothing was clicked before (title: "Animals", and no footer text).

I tried a lot, and I am absolutely not sure how to go on. Could somebody help me please?

web-sudo · Accepted Answer · 2020-11-10 04:57:21Z

1

It didn't work because you set the title as Animals in the mouseout event. Meaning, you do need to set the global value for the title like the below code lines.

let selected_animal = "Animals"

// Hover Function

$("#cats_image").mouseover(function() {
  $("h1").text("Cats");
});

$("#dogs_image").mouseover(function() {
  $("h1").text("Dogs");
});

$("#ducks_image").mouseover(function() {
  $("h1").text("Ducks");
});

$("img").mouseout(function() {
  $("h1").text(selected_animal);
});


// Click Function

$("#cats_image").click(function() {
  selected_animal = "Cats"
  $("h1").text("Cats");
  $("footer div").removeClass("show");
  $("#cats_text").addClass("show");
});

$("#dogs_image").click(function() {
  selected_animal = "Dogs"
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#dogs_text").addClass("show");
});

$("#ducks_image").click(function() {
  selected_animal = "Ducks"
  $("h1").text("Ducks");
  $("footer div").removeClass("show");
  $("#ducks_text").addClass("show");
});

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: normal;
}

header {
  width: 100%;
}

main {}

img {
  max-width: 200px;
  cursor: pointer;
}

footer div {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Animals</h1>
</header>

<main>
  <img id="cats_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Mackerel_tabby_cat_pair-Hisashi-01.jpg">
  <img id="dogs_image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Two_puppies_dogs.jpg">
  <img id="ducks_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/The_pair_of_ducks.jpg">
</main>

<footer>
  <div id="cats_text">Domestic cats are valued by humans for companionship and their ability to hunt rodents.</div>
  <div id="dogs_text">The coats of domestic dogs are of two varieties: "double" being familiar with dogs (as well as wolves) originating from colder climates, made up of a coarse guard.</div>
  <div id="ducks_text">Duck is the common name for numerous species in the waterfowl family Anatidae which also includes swans and geese.</div>
</footer>

answered Nov 10, 2020 at 4:57

web-sudo

6863 silver badges15 bronze badges

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

2 Comments

Anna_B Over a year ago

Thaaaanks! Looks good! One thing is missing: If you click in the white area, the initial state should appear. Doing it with "$("*").click(function()" does not work, unfortunately. :/

Lapskaus Over a year ago

For that, add a click event to the whole document resetting everything and tell the click events in your animal images to event.stopPropagation(); that way the click won't bubble up the DOM and trigger the click on the body (e.g. use $('body'))

Collectives™ on Stack Overflow

jQuery: Issues with combined click and hover functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related