Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How do I select a particular item in a nodelist using the onmouseover function?

byMR
December 2, 2021

I have a bunch of divs with the same class name and I want the background colour of one of the divs to change when I hover on it but when I hover on one, all the others change as well.

I tried turning the nodelist into an array then looping over the array but it still doesn’t work.

This is what I have
please help me improve on it or show me another way to acheive what want

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I would use the CSS .card-content:hover:{display:flex} but the original display is set to none so there is nothing to hover on

function showContent() {
    const card = document.querySelectorAll('.card-content');  
    // for (let i = 0; i < card.length; i++) {
    //     card[i].classList.toggle("show")
    // }  
    // // this.style.display= "flex";
    // for (const show of card) {
    //     console.log(show)
    // }
    // let cards = [card]
    // console.log(cards)
    var arr = [];
    for(var i = card.length; i--; arr.unshift(card[i]));
    // console.log(arr)
    for (let j = 0; j < arr.length; j++) {
        const show = arr[j];
        show.style.display= "flex";
    }
}
.project.container{
    width: 60%;
    display: flex;
    background-color: black;
    padding: 2vw 5vw;
    justify-content: space-between;
    flex-wrap: wrap;
}
.project .project_card {
    width: calc(50% - 2vw);
    margin: 1vw 1vw;
    text-align: center;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: violet;
}
.project .project_card.card1{
    background-image: url('../thumbs/dwyw.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card.card2{
    background-image: url('../thumbs/courselist.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card.card3{
    background-image: url('../thumbs/iqoption.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card.card4{
    background-image: url('../thumbs/slider.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card .card-content{
    background-color: #898987fa;
    height: 200px;
    width: 100%;
    padding: 2vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}
.show{
    display: flex;
}
.project .project_card .card-content a{
    background: linear-gradient(to right, #242424b0,#000000c0);
    padding: 1vw 2vw;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    font-weight: 700;
    font-size: 1.2vw;
    transition: all 0.5s;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
}
.project .project_card .card-content a:hover{
    background: linear-gradient(to right, #000000c0, #242424b0);
}
<div class="project container">
        <div class="project_card card1" onmouseover="showContent()">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card2" onmouseover="showContent()">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card3" onmouseover="showContent()">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card4" onmouseover="showContent()">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card5" onmouseover="showContent()">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card6" onmouseover="showContent()">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
    </div>

>Solution :

By far, the best way to do this is with CSS’s :hover pseudo-class to set the display of the .card-content element within the hovered .project_card element to flex:

.project_card:hover .card-content {
    display: flex;
}

Live Example:

.project.container{
    width: 60%;
    display: flex;
    background-color: black;
    padding: 2vw 5vw;
    justify-content: space-between;
    flex-wrap: wrap;
}
.project .project_card {
    width: calc(50% - 2vw);
    margin: 1vw 1vw;
    text-align: center;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: violet;
}
.project .project_card.card1{
    background-image: url('../thumbs/dwyw.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card.card2{
    background-image: url('../thumbs/courselist.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card.card3{
    background-image: url('../thumbs/iqoption.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card.card4{
    background-image: url('../thumbs/slider.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.project .project_card .card-content{
    background-color: #898987fa;
    height: 200px;
    width: 100%;
    padding: 2vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}
.show{
    display: flex;
}
.project .project_card .card-content a{
    background: linear-gradient(to right, #242424b0,#000000c0);
    padding: 1vw 2vw;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    font-weight: 700;
    font-size: 1.2vw;
    transition: all 0.5s;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
}
.project .project_card .card-content a:hover{
    background: linear-gradient(to right, #000000c0, #242424b0);
}

.project_card:hover .card-content {
    display: flex;
}
<div class="project container">
        <div class="project_card card1">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card2">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card3">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card4">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card5">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
        <div class="project_card card6">
            <div class="card-content">
                <h3 class="name">{%NAME%}</h3>
                <p class="desc">{%DESC%}</p>
                <a href="" class="view">View Project</a>
            </div>
        </div>
    </div>

But if you want to do it with JavaScript:

  • Make sure your showContent function has access to the event (by passing it in if you use onxyz-attribute-style event handlers, or by using modern event handling via addEventListener)
  • Find any previous .card-content that has the class that makes it a flex (let’s call it flex) and remove the class: document.querySelector(".card-content.flex")?.classList.remove("flex");
  • Find the .card-content within the .project_card the event occurred on (event.currentTarget.querySelector(".card-content"))
  • Add the class to it that gives it display: flex
  • Use a mouseout or mouseleave that removes the class as well

As you can see, that’s a lot more work than using CSS :hover.

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading