悬停和变化图像

Question

我正试图制作一个网站，与blazor，并希望有一个图像显示的一部分较大的照片，如果有人盘旋3-5秒，它会扩大，但是一个不同的形象。我想可能会有一个工具提示或什么东西会有帮助，但不确定的悬停导致不同的图像在一起。

Answer 1

这并不是特别的，它是可以用CSS来完成的。

你说的"..an图像显示大照片的一部分“的含义不太清楚。

此示例演示如何在图像上悬停，图像将缩放，然后在一段时间后进行更改。

在样式表文件中添加一些css：

.default-image {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url('/images/Cap1.png');    
    background-size: contain;
    background-repeat: no-repeat;
}

.hovering {
    display: block;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/images/Cap1.png');
    transform: scale(2.0);
}

    .hovering:hover {
        transition-delay: 1s;
        transition-duration: 0s;           
        background-image: url('/images/Cap2.png');        
    }

然后添加一个包含默认图像的<div>和将显示更改图像的另一个<div>。

您可以使用@onmouseover和@onmouseout事件。(可能还有@ontouchenter和@ontouchleave)

<div class="default-image"
     @onmouseout="@OnMouseOut"
     @onmouseover="@OnMouseOver">
    <div class="@_HoverImageCSSClass">
        @*this will be used for the transformed image*@
    </div>
</div>

@code {

    bool _IsHovering = false;
    string _HoverImageCSSClass = "";

    protected void OnMouseOver(MouseEventArgs mouseEvent)
    {
        if (!_IsHovering)
        {
            _IsHovering = true;
            _HoverImageCSSClass = "hovering";
            StateHasChanged();
        }
    }

    protected void OnMouseOut(MouseEventArgs mouseEvent)
    {
        _HoverImageCSSClass = "";
        _IsHovering = false;
        StateHasChanged();
    }
}

我使用了_IsHovering变量，这样当鼠标在图像中移动时，类只被设置一次。

transition-delay为1秒，transition-duration为0，但这显然可以更改为您的需要。

这将给你带来这样的效果：

​

​