javascript - 如何使用 Jquery 制作动态 CSS 类名

Question

实际上，我正在尝试制作动态 CSS 类名。下面，这三张图片有 3 个红色按钮，如果我悬停一个按钮，则会显示 3 个悬停弹出消息。但如果我悬停一个按钮，我想看到一条弹出消息。对于这些情况，我不想使用唯一 id 或不同的类，我想使用动态类。我怎样才能用 Jquery 解决它？

$('.image_dimension').hover(function(){
    $('.message').removeClass('hide');
}, function(){
    $('.message').addClass('hide');
});

.main_content{
  position: relative;
  border: 1px solid red;
  margin-right: 30px;
}
.main_content img{
  width: 100px;
  height: auto;
}
.message{
  position: absolute;
}
.hide{
  display: none;
}
.image_dimension {
  position: absolute;
  right: 15px;
  bottom: 30px;
  height: 27px;
  width: 27px;
  margin-left: 3px;
  cursor: pointer;
  z-index: 999999;
  background: red;
  border: 2px solid #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 6px -6px black;
}
.image_dimension::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 1px;
  text-align: center;
  font-family: "Garamond";
  content: "!";
  font-size: 17px;
  font-weight: bold;
  color: #fff;
}
.message{
  position: absolute;
  top: 50px;
  right: 55px;
  width: 100px;   
  line-height: 1.4;
  font-size: 14px;
  border: 1px solid rgb(180 180 180);
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 9999999;
  background: #ffffff;
}
.message::after{
  content: '';
  width: 0;
  height: 0;
  top: 16px;
  right: -12px;
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 18px solid #ffffff;
  box-shadow: 0 2px 0px #41414261 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div style="display: flex; justify-content: center;">
  <div class="main_content">
        <img src="https://static-01.daraz.com.bd/p/ad7f537a9ef6c038525a76f456346457.png_400x400q75-product.jpg_.webp">
        <a class="image_dimension"></a>
        <div class="message hide">
            <span><b>Photo quality issues :</b></span><br>
            <span>Lorem ipsum dolor amet lorem ipsum dolor amet</span>
        </div>
    </div>
    <div class="main_content">
        <img src="https://static-01.daraz.com.bd/p/ad7f537a9ef6c038525a76f456346457.png_400x400q75-product.jpg_.webp">
        <a class="image_dimension"></a>
        <div class="message hide">
            <span><b>Photo quality issues :</b></span><br>
            <span>Lorem ipsum dolor amet lorem ipsum dolor amet</span>
        </div>
    </div>
    <div class="main_content">
        <img src="https://static-01.daraz.com.bd/p/ad7f537a9ef6c038525a76f456346457.png_400x400q75-product.jpg_.webp">
        <a class="image_dimension"></a>
        <div class="message hide">
            <span><b>Photo quality issues :</b></span><br>
            <span>Lorem ipsum dolor amet lorem ipsum dolor amet</span>
        </div>
    </div>
</div>

标签： javascriptjquerycss