Can I use the mouseover event on an image to display a sibling div?

Question

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be working fine for every img tag except for the ones in the first row of the grid. In the desktop view, both trackid-img and stussy-img are not working, and in mobile view, only trackid-img is not working. Am I approaching this incorrectly? Would it be better to place these images inside a div as a background image instead of using img tags, and then apply the mouseenter/hover effect to the div? Essentially, I just want to hover over the image and have another element revealed, which would be links related to the hovered image.

var trackid = document.querySelector(".trackid-img")
var stussy = document.querySelector(".stussy-img")
var caltrends = document.querySelector(".caltrends-img")
var br8s = document.querySelector(".br8s-img")

var trackid_links = document.querySelector(".trackid-links")
var stussy_links = document.querySelector(".stussy-links")
var caltrends_links = document.querySelector(".caltrends-links")
var br8s_links = document.querySelector(".br8s-links")

trackid.addEventListener('mouseenter', showTrackidLink)
stussy.addEventListener('mouseenter', showStussyLink)
caltrends.addEventListener('mouseenter', showCaltrendsLink)
br8s.addEventListener('mouseenter', showbr8sLink)

function showTrackidLink(){
    trackid_links.style.visibility = "visible"
}

function showStussyLink(){
    stussy_links.style.visibility = "visible"
}

function showCaltrendsLink(){
    caltrends_links.style.visibility = "visible"
}

function showbr8sLink(){
    br8s_links.style.visibility = "visible"
}

.projects {
    height: 100vh;
    background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}

.project-container {
    position: relative;
    top: 10vh;
}

.work-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.work-col {
    margin: 1rem 0;
    margin-left: auto;
    margin-right: auto;
}

.project-card {
    position: relative;
    min-height: 38vh;
    width: 36rem;
    text-align: center;
}

.trackid-img {
    position: relative;
    top: 10vh;
    height: auto;
    width: 30rem;
}

.stussy-img {
    position: relative;
    top: 2vh;
    height: auto;
    width: 15rem;
}

.caltrends-img {
    position: relative;
    top: 4vh;
    height: auto;
    width: 16rem;
}

.br8s-img {
    position: relative;
    top: 10vh;
    height: auto;
    width: 20rem;
}

.work-link {
    visibility: hidden;
}

.trackid-links {
    position: relative;
    top: 20vh;
}

.stussy-links {
    position: relative;
    top: 2vh;
}

.caltrends-links {
    position: relative;
    top: 10vh;
}

.br8s-links {
    position: relative;
    top: 15vh;
}

    <section class="projects">
        <div class="outer-container">
            <div class="project-container">
                <div class="work-row">
                    <div class="work-col">
                        <div class="project-card trackid-card">
                            <img class="trackid-img" src="images/TRACKID.png">
                            <div class="work-link trackid-links">
                                <a href="">
                                    <img class="github-img" src="images/github.png">
                                </a>
                                <img class="linkedin-img" src="images/linkedin.png">
                            </div>>
                        </div>
                    </div>
                    <div class="work-col">
                        <div class="project-card stussy-card">
                            <img class="stussy-img" src="images/stussy.png">
                            <div class="work-link stussy-links">
                                <a href="https://github.com/br8S/Stussy-Landing-Page">
                                    <img class="github-img" src="images/github.png">
                                </a>
                                <a href="https://br8s.github.io/Stussy-Landing-Page/">
                                    <img class="linkedin-img" src="images/linkedin.png">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="work-row">
                    <div class="work-col">
                        <div class="project-card caltrends-card">
                            <img class="caltrends-img" src="images/CALTRENDS.png">
                            <div class="work-link caltrends-links">
                                <img class="github-img" src="images/github.png">
                                <img class="linkedin-img" src="images/linkedin.png">
                            </div>
                        </div>
                    </div>
                    <div class="work-col">
                        <div class="project-card br8s-card">
                            <img class="br8s-img" src="images/br8SLOGO.png">
                            <div class="work-link br8s-links">
                                <img class="github-img" src="images/github.png">
                                <img class="linkedin-img" src="images/linkedin.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

javascript html css

Answer 1

Answer №1

When you have the desire to execute the same action regardless of the image being hovered over, it is best practice to avoid creating separate event handlers and instead utilize a single one. The key to achieving this is to use relative references to the next sibling element following the one that triggered the event, rather than depending on unique identifiers such as ids or class names.

Furthermore, insteading of establishing individual event handlers for each image, you can set up a single handler at a common ancestor of all images and allow the event to propagate up to that ancestor. Subsequently handling the event there and making decisions based on the actual triggering element makes use of a concept known as "event delegation", which significantly enhances the code's efficiency, performance, and scalability.

In the provided code below, you will observe an additional class named mouse assigned to any image responsible for initiating the event. Despite the absence of loops, references to IDs or distinct classes, and repetition of similar functions, the functionality remains intact. Adding a new project-card in the future only necessitates inserting the appropriate HTML structure alongside the existing content for seamless integration without further modifications required.

// Establish a single event handler on a shared ancestor
// of all potentially mouseovered images
document.querySelector(".project-container").addEventListener("mouseover", function(event){
  // Identify if the event originated from one of the
  // images designed for triggering this event (each image with 
  // this functionality has been given an extra class 'mouse' in the HTML)
  if(event.target.classList.contains("mouse")){
    // Make the next sibling element visible
    event.target.nextElementSibling.classList.remove("work-link");
  }
});

.projects {
    height: 100vh;
    background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}

/* Remaining CSS styles omitted for brevity */

<section class="projects">
        <!-- HTML markup for projects section -->
</section>

Answer 2

When you have the desire to execute the same action regardless of the image being hovered over, it is best practice to avoid creating separate event handlers and instead utilize a single one. The key to achieving this is to use relative references to the next sibling element following the one that triggered the event, rather than depending on unique identifiers such as ids or class names.

Furthermore, insteading of establishing individual event handlers for each image, you can set up a single handler at a common ancestor of all images and allow the event to propagate up to that ancestor. Subsequently handling the event there and making decisions based on the actual triggering element makes use of a concept known as "event delegation", which significantly enhances the code's efficiency, performance, and scalability.

In the provided code below, you will observe an additional class named mouse assigned to any image responsible for initiating the event. Despite the absence of loops, references to IDs or distinct classes, and repetition of similar functions, the functionality remains intact. Adding a new project-card in the future only necessitates inserting the appropriate HTML structure alongside the existing content for seamless integration without further modifications required.

// Establish a single event handler on a shared ancestor
// of all potentially mouseovered images
document.querySelector(".project-container").addEventListener("mouseover", function(event){
  // Identify if the event originated from one of the
  // images designed for triggering this event (each image with 
  // this functionality has been given an extra class 'mouse' in the HTML)
  if(event.target.classList.contains("mouse")){
    // Make the next sibling element visible
    event.target.nextElementSibling.classList.remove("work-link");
  }
});

.projects {
    height: 100vh;
    background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}

/* Remaining CSS styles omitted for brevity */

<section class="projects">
        <!-- HTML markup for projects section -->
</section>

Can I use the mouseover event on an image to display a sibling div?

Answer №1

Similar questions

Can a Django form be configured to hide submitted values using display:none?

Is it possible to assign functions to each keystroke that does not correspond to a specific keybinding in Angular?

Exploring methods to detect when a PHP page has been printed using the 'ctrl+p' shortcut and then subsequently updating

Numerous Radio Buttons

Closures are like the "use" keyword in PHP or the capture list in C++, but they play a similar role in JavaScript and other transpiler languages

Tips for choosing the desired test to execute with Nightwatch Programmatic API

The error message "Encountered an issue when trying to access properties of undefined (reading 'getState')" was

Archive a webpage with refreshed content using ajax

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string

Issues arise with the behavior of Bootstrap design when adapting to different screen sizes, as well as

Error in Node.js child_process: unable to access the property '_writableState' as it is undefined

Is it possible in PHP to iterate through a query and sort it into a designated column according to a specific value?

Arranging adjacent div blocks to maintain alignment in a stylish way

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

Unable to display JSON results in a tabular format

Utilizing a JavaScript variable within a jQuery function as an attribute

Is there a way to access hover effect information in Atom editor similar to how it appears in VScode?

What is causing my ReactJS web application to not recognize the cookies being sent by the backend server?

filtering elements with selectable functionality in jQuery UI

Adding an icon to the Autocomplete TextField in MUI v5 in Reactjs: A step-by-step guide