Ways to activate a hover effect on an external element

Question

Ways to activate a hover effect on an external element

Hello everyone!

This is my first time posting here and I've been struggling to find a solution with my limited knowledge. I could really use some help on this:

Is there a way to trigger a hover effect on an element that is not related (no parent, child, or sibling)?

Here's the code I have:

<div id="projects">
  <section class="menu_projects">       
    <ul>
      <li class="1"><a></a></li>
      <li class="2"><a></a></li>
    </ul>
  </section>
  <section class="preview_projects">        
    <div id="preview"></div> 
  </section>
</div>

I want to change the background image of "#preview" when hovering over "Class 1" and display another image when hovering over "Class 2."

Please feel free to share any suggestions you might have whether it's CSS, JavaScript, or something else. Thank you all in advance!

html css hover

Answer 1

Answer №1

Let's tackle this problem with some JavaScript wizardry!

I've stored the images in an array named images. By using the forEach() method, I can target each li tag individually. When the mouse moves over one of these tags, I fetch the corresponding image from the array based on its index.

Also worth noting is that your current class names for the li tags - 1 and 2 - aren't suitable for CSS styling. I've made adjustments to them, now they are li_1 and li_2.

window.onload = function() {
let ul_li = document.querySelectorAll('ul li');
let preview = document.querySelector('#preview');
let images = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'];

  ul_li.forEach(function(ul_li_current, index) {
    ul_li_current.addEventListener('mousemove', function() {
      preview.style.backgroundImage = "url('"+ images[index] +"')";
    })
  })
}

#preview {
  width: 300px;
  height: 300px;
  background-size: cover;
}

<div id="projects">
  <section class="menu_projects">       
    <ul>
      <li class="li_1"><a>image 1</a></li>
      <li class="li_2"><a>image 2</a></li>
    </ul>
  </section>
  <section class="preview_projects">        
    <div id="preview"></div> 
  </section>
</div>

Answer 2

Let's tackle this problem with some JavaScript wizardry!

I've stored the images in an array named images. By using the forEach() method, I can target each li tag individually. When the mouse moves over one of these tags, I fetch the corresponding image from the array based on its index.

Also worth noting is that your current class names for the li tags - 1 and 2 - aren't suitable for CSS styling. I've made adjustments to them, now they are li_1 and li_2.

window.onload = function() {
let ul_li = document.querySelectorAll('ul li');
let preview = document.querySelector('#preview');
let images = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'];

  ul_li.forEach(function(ul_li_current, index) {
    ul_li_current.addEventListener('mousemove', function() {
      preview.style.backgroundImage = "url('"+ images[index] +"')";
    })
  })
}

#preview {
  width: 300px;
  height: 300px;
  background-size: cover;
}

<div id="projects">
  <section class="menu_projects">       
    <ul>
      <li class="li_1"><a>image 1</a></li>
      <li class="li_2"><a>image 2</a></li>
    </ul>
  </section>
  <section class="preview_projects">        
    <div id="preview"></div> 
  </section>
</div>

Ways to activate a hover effect on an external element

Answer №1

Similar questions

Changing innerHTML with HTML generated by a PHP function? (utilizing xajax)

Incorporate the AngularJS controller into your JavaScript code

The button click event fails to trigger after entering text into an input field

Any suggestions on how I can make my modal stand out more?

What do you call the syntax %< ... >%?

Refresh a webpage content dynamically without the need to reload the entire page

Displaying a variable within a label utilizing the syntax <%= %>

Add multiple images to various div containers

What is the best way to iterate through anchor links surrounding an image and dynamically load content into the figcaption element using AJAX?

Reducing the size of a Form Fieldset text once an option has been selected

binding swipe action to click event

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

The CSS import for fonts is causing no change in the font appearance

ways to remove a specific category from a search

Animating Sliding Images with jQuery in a Sleek Sliding Page

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Generating Dynamic Widgets Within the Document Object Model

Populate div with straight lines running vertically or horizontally

How can you adjust the div orientation for small screens using Bootstrap?

Bulma's Grid System Spans Columns Across the Entire Viewport