changing card data and color on hover, should I set all data to defult state when hover into another card? or just toogle the previous card?

I have to make some card components, where the user hovers over them. The data and color of this card will change and it will remain unchanged before the user hover over another card, When user hover on another card, data of the previous card will return to the primary state and the hovered card data and color will change.

My question is What will be the optimized way to do it?

**way 1: ** when I hit the hover over function, I will make all card data to the primary state and change the hovered card data.

**way 2: ** when I hit the hover-over function, I will check which card data was previously changed and return that card data to the primary state and change the hover-over card data.

So in those two ways, which way will be better optimized? Or is any other way to do it optimized way?

Here is a way 3, which is quick and easy: Add a class to all cards, say card, and define a class, say hoverState. When you enter a card simply remove hoverState from all card elements, then add the hoverState to the current one.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function swapImgSrc(elem) {
let src = elem.dataset.src;
elem.dataset.src = elem.src;
elem.src = src;
}
function swapText(elem) {
let text = elem.dataset.text;
elem.dataset.text = elem.innerText;
elem.innerText = text;
}
document.getElementById('container').addEventListener("mouseover", (event) => {
if(event.target.classList.contains('card')) {
[...document.getElementsByClassName('hoverState')].map(x => {
x.classList.remove('hoverState');
swapImgSrc(x.querySelector('img'));
swapText(x.querySelector('.swap'));
});
event.target.classList.add('hoverState');
swapImgSrc(event.target.querySelector('img'));
swapText(event.target.querySelector('.swap'));
}
}, false);

<!-- language: lang-css -->

.card {
float: left;
width: 100px;
border: 1px gray solid;
padding 3px 5px;
margin: 10px 10px;
text-align: center;
}
.hoverState {
background-color: lightyellow;
font-weight: bold;
}

<!-- language: lang-html -->

<div id="container">
<div class="card"><div>Card 1</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 2</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 3</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 4</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 5</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 6</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 7</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 8</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 9</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div class="swap" data-text="Foo changed">Foo bar</div></div>
<div class="card"><div>Card 10</div><img src="https://via.placeholder.com/80x40/c9f7bc.png?text=Original+text" width="80" data-src="https://via.placeholder.com/80x40/f7bcbc.png?text=Changed+text" /><div data-text="Foo changed">Foo bar</div></div>
</div>

<!-- end snippet -->

UPDATE: I updated the answer with new requirement to swap image and text within a card. The cards have:

• <img src="..." data-src="..." /> -- the img tag has a data-src attribute that contains the alternative image URL on hover
• <div class="swap" data-text="...">...</div> -- the div with .swap has a data-text attribute that contains the alternative text on hover
• on hover in/out, the alternative URL/text is swapped with the actual URL/text, and vice versa