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>

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

Leave a Comment