How to change the element of another div by clicking and hovering on an element of a different div

by

Like people have said there are many ways to do this. One way would be to use JavaScript event listeners. Here’s a quick little demo: 

let change = document.getElementById("change");
let hover = document.getElementById("hover");

hover.addEventListener("mouseover", changeColor);
hover.addEventListener("mouseout", changeColor);

function changeColor() {
  change.classList.toggle("red");
}
div {
  width: 100px;
  height: 100px;
  margin: 2rem;
  background-color: green;
}

.red {
  background-color: red;
}
<div id="change">
  Change Me
</div>

<div id="hover">
  Hover Me
</div>

Good luck! I’d definitely recommend on reading up on event listeners if you’re not already familiar with them.

More Related Contents:

  1. How make my CSS responsive using Bootstrap 3.1
  2. Add Content to webpage using only CSS
  3. anchor click doesn’t open the modal
  4. CSS block doesn’t show click on a button
  5. how to force list items to go to differents rows?
  6. What will be selector for multi class HTML element in CSS or JQuery?
  7. Issue with a design when content increase [closed]
  8. Slide down button to show text HTML CSS
  9. Auto-size dynamic text to fill fixed size container
  10. iframe to Only Show a Certain Part of the Page
  11. Auto-scaling input[type=text] to width of value?
  12. Play/pause HTML 5 video using JQuery
  13. How to automatically change the text size inside a div?
  14. Find text string in jQuery and make it bold
  15. Add and remove a class on click using jQuery?
  16. jquery IE Fadein and Fadeout Opacity
  17. Activate CSS3 animation when the content scrolls into view
  18. Number nested ordered lists in HTML
  19. How do I auto-hide placeholder text upon focus using css or jquery?
  20. expand/collapse table rows with JQuery
  21. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery [closed]
  22. Selecting only first-level elements in jquery
  23. How to make Bootstrap carousel slider use mobile left/right swipe
  24. Creating a hole in a element
  25. Get the value of -webkit-transform of an element with jquery
  26. Can an iframe only show a certain part of the page?
  27. Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
  28. How to keep footer at the bottom even with dynamic height website
  29. JQuery search in static HTML page with highlighting of found word
  30. Possible to have a floating horizontal scrollbar?

Leave a Comment