Home>

"Mouse over A → Event occurs in A1"
"Mouse over B → Event occurs in B1"

And so onI want to make multiple items that perform the same operationBut
It will be reflected in only one or all will be reflected at the same time.

Since they have the same class name,
Of course, if you write it with querySelector, it will be reflected in only one item (the former),
If i write with querySelectorAll and forEach, it will be processed at once (the latter), and I am at a loss as to what to do.

Use this? I'm thinking about things like that and trying various things.
I have a question because I don't understand.

I'm sorry for being a beginner, but thank you.

Error message
Corresponding source code
<body>
  
  <ul>
    <li>
         
      <p>Ah</p>
         
    </li>
    <li>
         
      <p>Good</p>
         
    </li>
  </ul>
  
<script type = "text/javascript" src = "js/main2.js"></script>
</body>
const Item = document.querySelectorAll ('.item-img');
const Link = document.querySelectorAll ('.item-link');
Link [0] .addEventListener ('mouseenter', () =>{
  if (Item [0] .classList.contains ('scale-bg') === false) {
  Item [0] .classList.add ('scale-bg');
  }
});
Link [1] .addEventListener ('mouseenter', () =>{
  if (Item [1] .classList.contains ('scale-bg') === false) {
  Item [1] .classList.add ('scale-bg');
  }
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
/ * ------------- * /
.items {
    width: 300px;
    margin: 0 auto;
}
.items-in {
    display: flex;
    justify-content: space-between;
}
.item {
    position: relative;
    text-align: center;
}
.item-img {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background-color: # d8effc;
    transition: .3s all;
}
.item-img.scale-bg {
    transform: scale (1.2, 1.2);
}
.item-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
What I tried

As a result of various trialsThe above code will be the desired moveBut
I have to write a lot of the same things as the number of items increasesDon't.
I'm sure there is a more efficient way to write it, but I don't know ...

In short, I want to generate multiple "mouseover on elements containing A and A1" → "move to A1"That being said, is there any other way than this method in the first place? I feel like I'm doing something bothersome.

I would be very grateful if you could give me some advice!
We apologize for the inconvenience, and thanks for your understanding.

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.

  • Answer # 1

    How about searching for the element to be changed based on the element in which the event occurred?

    const Links = document.querySelectorAll ('.item-link');
    Links.forEach (link =>{
      link.addEventListener ('mouseenter', (e) =>{
        const item = e.target.closest ('li.item'). QuerySelector ('.item-img');
        if (! item.classList.contains ('scale-bg')) {
          item.classList.add ('scale-bg');
        }
      });
    })

Related articles