Blazor 悬停并更改图像

我正在尝试用blazor制作一个网站，希望有一张图片能显示一张较大照片的一部分，如果有人在上面悬停3-5秒，它会放大，但会是一张不同的图片。我猜可能会有工具提示或其他有用的东西，但不确定悬停是否会导致不同的图像。

这不是Blazor特有的，而是可以使用CSS完成的

不太清楚你所说的“.显示大照片一部分的图像…”

此示例显示如何将鼠标悬停在图像上，图像将放大，然后在一段时间后更改

向样式表文件添加一些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');        
    }

然后添加一个包含默认图像的

，以及另一个将显示更改图像的

您可以使用

@onmouseover

和

@onmouseout

事件。（可能还有

@ontouchcenter

和

@ontouchleave

）

@*这将用于变换后的图像*@
@代码{
bool_IsHovering=false；
字符串_HoverImageCSSClass=“”；
MouseOver上的受保护空隙（MouseEventArgs mouseEvent）
{
如果（！\u Ishoring）
{
_Ishoring=真；
_HoverImageCSSClass=“悬停”；
StateHasChanged（）；
}
}
MouseEventArgs mouseEvent上受保护的空白
{
_HoverImageCSSClass=“”；
_IsHovering=假；
StateHasChanged（）；
}
}

我使用了

\u IsHovering

变量，这样当鼠标在图像中移动时，该类只设置一次

转换延迟

为1秒，

转换持续时间

为0，但这显然可以根据您的需要进行更改

这将给您带来以下效果：

---

这与Blazor无关，也不特定于Blazor。您只需要找到一个具有此功能的javascript库，并将其与Blazor一起使用。

<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();
    }
}