当我将鼠标悬停在图像上时，我希望它具有模糊属性，但是我无法弄清楚错误在哪里

问题描述

嗨，我想让鼠标停留在图片上，它具有模糊的属性，但不知道错误在哪里？但是我知道了，以便颜色也具有模糊属性，但是我不需要它，我只需要具有该属性的图像而不是整个div

    <div class="service-item">
            <div class="service-item-image">
                <img class="response-square" src="{{url('/storage/'.$product->getimages()[0])}}" alt="Alt">
                <v-btn outlined itemprop="url" href="{{$product->link}}" rounded color="white">{{__('my.Skonfiguruj zamówienia')}}</v-btn>
            </div>
            <div class="service-item-price">
                <h4>{{$product->name}}</h4>
                <span class="price" content="{{$product->calculated}}">
                    Od {{$product->calculated}}<span>&nbsp; zł / 100 szt.</span>
                </span>
            </div>
        </div>

    <div class="service-item">
            <div class="service-item-image">
                <img class="response-square" src="{{url('/storage/'.$product->getimages()[0])}}" alt="Alt">
                <v-btn outlined itemprop="url" href="{{$product->link}}" rounded color="white">{{__('my.Skonfiguruj zamówienia')}}</v-btn>
            </div>
            <div class="service-item-price">
                <h4>{{$product->name}}</h4>
                <span class="price" content="{{$product->calculated}}">
                    Od {{$product->calculated}}<span>&nbsp; zł / 100 szt.</span>
                </span>
            </div>
        </div>


.service-item {
    margin-left: 4px;
    margin-right: 4px;


    h4{
        margin-top: 15px;
        text-align: center !important;
        font-size: 17px !important;
    }

    &:hover {

        .service-item-image {

            .v-btn {
                opacity: 1;
                top: 45%;
            }

            &::before {
                border-radius: 17px;
                opacity: .6;

            }

        }
    }

    &-image {
        min-height: max-content !important;
        background-size: cover !important;
        position: relative !important;

        img{
            width: 100%;
            border: 2px solid #FFEBF6;
            border-radius: 19px;
            object-fit: cover;

        }

        .v-btn{
            font-size: 14px !important;
            position: absolute !important;
            left: 10% !important;
            height: 55px !important;
            width: 80%;
            top: 80%;
            opacity: 0;
            -webkit-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

            &:after{
                opacity: 1;
            }

        }

        &:before{
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left:0;

            background-color: $primary-color;
            opacity: 0;
            transition: all .5s ease;


        }

    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）