Do CSS hover effects not work in NUI?

FiveM Resource Development Discussion
1

I’ve been designing the UI for a resource that I’m developing. One of the items in the UI is supposed to have a hover effect but it appears to only work with clicking the item. Is there any way to get the actual hover event to work or is NUI designed to not support hover events? Are there any workarounds?

2

i have hover working with NUIs

3

That’s really odd that its not working for me. I copied and pasted the same code from my resource into jsfiddle and it worked fine but not in game.

4

can you provide some code (css)

5 
<div class="charge" data-crime-id="5">
  <span class="charge-name">Attempted Murder</span>
  <a href="#" class="adjust-up"><i class="fa fa-caret-up"></i></a>
  <span class="charge-count">2</span>
  <a href="#" class="adjust-down"><i class="fa fa-caret-down"></i></a>
</div>


.charge {
    border-radius: 100em;
    padding: 4px;
    float: left;
    background: #49ACD5;
    margin: 12px 12px 0 0;
    font-size: 12px;
    display: inline-block;
    width: auto;
}
.charge:hover .adjust-up {
    display: inline-block;
}
.charge .charge-name {
    float: left;
    padding-right: 4px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
}
.charge .adjust-up, .charge .adjust-down, .charge-count {
    color: rgba(0, 0, 0, 0.8);
    padding: 4px;
}
.adjust-down, .adjust-up {
    display: none;
}

I have hover effects on other elements that dont work at all either. Works in browser but not in game.

6

It seems like it does work sometimes but not all the time. Sometimes the hover works, other times it doesnt and i have to click to get the effects to work. Same for other elements in my UI that have hover effects. Anybody know whats going on?

7

Sounds like maybe your cursor isn’t focused on the NUI page until you click it? Maybe try using SET_NUI_FOCUS - Cfx.re Docs

8

This is where I use that

RegisterNetEvent("MDT:displayUI")
AddEventHandler("MDT:displayUI", function(char, xPlayer, isAdmin)
    SetNuiFocus(true, true)
    SendNUIMessage({
        action = "openui",
        char = char,
        xPlayer = xPlayer,
        IsAdmin = isAdmin
    })
end)
9

I don’t suppose you worked this out did you?

I’ve got a NUI where the effect worked, after some editing the HTML/CSS it no longer does; not sure what I’ve done!

10

Resolution - When you have the devtools open it changes the way the mouse works within the NUI, and instead it works like it is on a touch device (smartphone, tablet etc). This changes how CSS hovers work.

Closing devtools restored proper mouse over activity within the game.

5 Likes
11

Thank you for this.