Is it possible to add a mouseenter event to an img in order to make a sibling div visible?

Hey guys I am kind of new to web dev and would appreciate some guidance. I am attempting to add a mouseenter event to an img tag in order to make a sibling div visible, however I have run into some weird behavior. The mouseenter event only seems to be successful for every single img tag besides the ones in the first row of the grid. So in my desktop view both trackid-img and stussy-img do not work and in mobile view only trackid-img does not work. Is my logic bad? Would I be better off placing these images in a div as a background image, instead of img tags, and applying the mouseenter/hover to the div? Essentially, all I would like to be able to do is hover over the image and upon hovering over the image another element is revealed. These elements would be links related to the image hovered.

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>

1 thought on “Is it possible to add a mouseenter event to an img in order to make a sibling div visible?”

  1. Because you want to do the same thing regardless of which image is moused over (make the next sibling div visible), you should avoid writing separate event handlers and just use one. The way to accomplish this is to, rather than relying on ids or unique class names, use relative references to the next sibling element after the one that triggered the event.

    Additionally, instead of setting up event handlers on each image, you can just set one up at a common ancestor of all the images and let the event bubble up to that ancestor. Then handle the event there and based on what element actually triggered the event, proceed as needed. This is called "event delegation" and makes the code, it’s performance and scalability much better.

    In the code below, notice that I’ve added an additional class of mouse to any image that needs to be responsible for triggering the event, but also notice that there are no loops, no references to ids or unique class names and no repeating of essentially the same function. If you have a new project-card in the future, just add the proper HTML structure to what’s already there and it will work without any other changes.

    // Just set up one event handler on a common ancestor
    // of all the images that "might" be moused over
    document.querySelector(".project-container").addEventListener("mouseover", function(event){
      // Determine if the event originated with one of the
      // images that we care about handling (I have given
      // each of the images that need to be originators of
      // this event an additional HTML class of "mouse").
      if(event.target.classList.contains("mouse")){
        // Make the next element sibling visible
        event.target.nextElementSibling.classList.remove("work-link");
      }
    });
    .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 mouse" 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 mouse" 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 mouse" 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 mouse" 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>
    Reply

Leave a Comment