Changing background images with CSS upon mouse hover

Question

Changing background images with CSS upon mouse hover

I've been attempting to create a mega menu-like design, but so far, I haven't had much success. Below is the code I've been using for the simplest possible result.

The setup involves two divs - one for an image and another for the menu. The goal is to have the image change when hovering over a link in the menu. I'm open to using either CSS or JavaScript to achieve this effect.

Here is the HTML code:

<div>
    <div id="img_div"></div>
    <div id="links_div">
        <ul>
            <li><a href="">Show image 1</a></li>
            <li><a href="">Show image 2</a></li>
            <li><a href="">Show image 3</a></li>
            <li><a href="">Show image 4</a></li>
            <li><a href="">Show image 5</a></li>
        </ul>
    </div>
</div>

And here is the CSS code:

<style>
 #img_div{
    height: 200px;
    width: 200px;
    background: url("images/default.jpg");
    float: left;
}
 #links_div{
    float: left;
    height: 200px;
    width: 200px;
}
ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul li{
    display: block;
}
ul li a{
}
</style>

javascript jquery html css

Answer 1

Answer №1

I have developed a sample code that utilizes the click event. Let me know if this meets your requirements. If I've understood correctly, you could potentially replace "click" with "hover" based on your problem statement.

Update: Implementing mouse events instead of click events

$(document).ready(function() {
  $("#links_div a").on("mouseenter", function() {    
    $("#img_div").addClass($(this).attr('data-class'));
  });
  
  $("#links_div a").on("mouseleave", function() {
    $("#img_div").removeClass($(this).attr('data-class'));
  });
});

#img_div {
  height: 200px;
  width: 200px;
  background: url("http://placehold.it/200x200");
}
#img_div.a {
  background: url("http://placehold.it/200x200?text=a");
}
#img_div.b {
  background: url("http://placehold.it/200x200?text=b");
}
#img_div.c {
  background: url("http://placehold.it/200x200?text=c");
}
#img_div.d {
  background: url("http://placehold.it/200x200?text=d");
}
#img_div.e {
  background: url("http://placehold.it/200x200?text=e");
}
#links_div {
  float: left;
  height: 200px;
  width: 200px;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li {
  display: block;
}
ul li a {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="img_div"></div>
  <div id="links_div">
    <ul>
      <li><a href="javascript:void(0)" data-class="a">Show image 1</a>

      </li>
      <li><a href="javascript:void(0)" data-class="b">Show image 2</a>

      </li>
      <li><a href="javascript:void(0)" data-class="c">Show image 3</a>

      </li>
      <li><a href="javascript:void(0)" data-class="d">Show image 4</a>

      </li>
      <li><a href="javascript:void(0)" data-class="e">Show image 5</a>

      </li>
    </ul>
  </div>
</div>

Answer 2

I have developed a sample code that utilizes the click event. Let me know if this meets your requirements. If I've understood correctly, you could potentially replace "click" with "hover" based on your problem statement.

Update: Implementing mouse events instead of click events

$(document).ready(function() {
  $("#links_div a").on("mouseenter", function() {    
    $("#img_div").addClass($(this).attr('data-class'));
  });
  
  $("#links_div a").on("mouseleave", function() {
    $("#img_div").removeClass($(this).attr('data-class'));
  });
});

#img_div {
  height: 200px;
  width: 200px;
  background: url("http://placehold.it/200x200");
}
#img_div.a {
  background: url("http://placehold.it/200x200?text=a");
}
#img_div.b {
  background: url("http://placehold.it/200x200?text=b");
}
#img_div.c {
  background: url("http://placehold.it/200x200?text=c");
}
#img_div.d {
  background: url("http://placehold.it/200x200?text=d");
}
#img_div.e {
  background: url("http://placehold.it/200x200?text=e");
}
#links_div {
  float: left;
  height: 200px;
  width: 200px;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li {
  display: block;
}
ul li a {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="img_div"></div>
  <div id="links_div">
    <ul>
      <li><a href="javascript:void(0)" data-class="a">Show image 1</a>

      </li>
      <li><a href="javascript:void(0)" data-class="b">Show image 2</a>

      </li>
      <li><a href="javascript:void(0)" data-class="c">Show image 3</a>

      </li>
      <li><a href="javascript:void(0)" data-class="d">Show image 4</a>

      </li>
      <li><a href="javascript:void(0)" data-class="e">Show image 5</a>

      </li>
    </ul>
  </div>
</div>

Answer 3

Answer №2

Implement a CSS rule that exclusively targets the div with the class altImage:

#img_div.altImage {
    background: url("images/alt.jpg");
}

Incorporate JavaScript to assign a class to the div when hovered over:

var links = document.getElementById("links_div");

links.addEventListener("mouseenter", function(e) {
    document.getElementById("img_div").classList.add("altImage");
});

links.addEventListener("mouseleave", function(e) {
    document.getElementById("img_div").classList.remove("altImage");
});

This approach should be effective

Answer 4

Implement a CSS rule that exclusively targets the div with the class altImage:

#img_div.altImage {
    background: url("images/alt.jpg");
}

Incorporate JavaScript to assign a class to the div when hovered over:

var links = document.getElementById("links_div");

links.addEventListener("mouseenter", function(e) {
    document.getElementById("img_div").classList.add("altImage");
});

links.addEventListener("mouseleave", function(e) {
    document.getElementById("img_div").classList.remove("altImage");
});

This approach should be effective

Changing background images with CSS upon mouse hover

Answer №1

Answer №2

Similar questions

Tips on separating/callback functions based on earlier variables

Perform two functions in order using jQuery within a loop

The jQuery Mobile click event is limited to firing only once, as the DOM undergoes changes as a result of the initial

How can I add text to the title of a border using Bootstrap5?

Combining multiple AngularJS expressions to form a URL within an interpolation statement

Utilize MySQL to populate highcharts with data

Having trouble integrating SVG icons into my Angular project

How to remove checkbox border using HTML, JavaScript, and CSS

Methods for anchoring an element at the bottom of a square container div

What are the implications of making more than 8 ajax calls simultaneously when a single submit button event is triggered?

Unable to add to content that is generated dynamically

Discovering a specific value within a JSON stringified array

Is it possible for Monaco Editor to accommodate nested tokens?

The file field appears to be empty when sending a multipart/form-data request via AJAX

Displaying server errors in an Angular componentIn this tutorial, we

Ensuring the accuracy of input data in all input fields with the help of dojo

Arrange records in ascending order by phone number when multiple are returned on the same date

Is d3 Version pretending to be a superior version?

Error encountered: Index 109 - The function $.ajax(...).success is not recognized as a valid function while working with jQuery in a Node

Mastering AJAX requests in Zend Framework