Html 在图片上显示符号，同时在图片上显示鼠标

目前，我正在VueJS上开发简单的卡片配方，但有一个小问题。当鼠标在图像上时，我想展示我的配方的不同特性（如图所示）。首先，我把我的图像调暗一点，并试图在上面显示符号（当鼠标在ofc上时），但它似乎不起作用。这是我的密码： CSS

Vue中的代码：

<div class="imageRecipeContainer">
        <img class="card-image" :src="card.image"/>
        <img class="imagePerfumeRate" :src="require('../assets/2PointPerfumeRate.svg')"/>
</div>

您确定

src

可以以

.image

结尾吗？你是说

.png

还是

.jpg

？因为我没有听说过Vue中的

.image

@php123，它将是一个绑定的数据属性，所以

卡

是一个object@Pandor您是否尝试过同级运算符：

~

<代码>.card image:hover~.imagePerfumeRate是的，卡是一个对象和一个属性。图像是示例图片的路径。@Daniel_Knights感谢工作人员。非常感谢你！！！

<div class="imageRecipeContainer">
        <img class="card-image" :src="card.image"/>
        <img class="imagePerfumeRate" :src="require('../assets/2PointPerfumeRate.svg')"/>
</div>