CODEWITHSUNDEEP
cssparametersblazorelementonmouseover
Andronicos
Andronicos

Reputation: 11

blazor dynamically change css on mouseover when multible divs are displayed

@foreach (var item in RootOfJson.results)
{
<div class="card" @onmouseout="@OnMouseOut" @onmouseover="@OnMouseOver"> 
<img class="@Imgdisplay" [email protected]_url  alt="...">                                            
</div>
}
    

@code {

bool _IsHovering = false;
[Parameter]
public string Imgdisplay { get; set; }

 protected void OnMouseOver(MouseEventArgs mouseEvent)
    {
        if (!_IsHovering)
        {
            _IsHovering = true;     
            Imgdisplay = "d-none";
            StateHasChanged();
        }
    }

    protected void OnMouseOut(MouseEventArgs mouseEvent)
    {       
        Imgdisplay = String.Empty;        
        _IsHovering = false;
        StateHasChanged();
    }

Above code changes the css for all divs, can you assist.. i would like to change the class to d-none on the specific div that my mouse event occurs.

Upvotes: 1

Views: 541

Answers (1)

Milan Truchan
Milan Truchan

Reputation: 9

When you go over some div, method OnMouseOver is called, it sets _IsHovering to true and Imgdisplay to "d-none". All your div elements use _IsHovering. That's why css for all div elements is changed.

I think it would be a good idea to create separate component and put div with things it uses (e.g. _IsHovering or Imgdisplay) there. This way each div will "work on its own" and will not share the state.

Upvotes: 0

Related Questions