悬停效果只在特定的类上

Question

我已经添加了下面图片的链接请注意左侧栏，其中包含5个元素，如报价附近你，TopPick等。当用户点击Top Pick时，只有Top Pick的图像应该悬停，而不是文字"Top Pick"。

<div className="Offer__Sidebar">
<div className="Offers_Near_You">
<img className="Offer__img" src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_90,h_90/hxizld3pqhnk0smw27sl" />
<div className="Offer__div">
<div>Offers Near You</div>
<p>211 OPTIONS</p>
</div>
</div>
<div className="Top_Picks">
</div>
<div className="Whats_New">
</div>
<div className="Vegeterian_Options">
</div>
<div className="See_All">
</div>
</div>

输入图片描述

Answer 1

当Offers_Near_You被悬停时，可以选择img

.Offers_Near_You:hover img { put the styling you want for img here }