Hover
Hover over an element and see another element change.
Hover
Hover over an element and see another element change.
Live Demo
Source
package examples
import (
"context"
l "github.com/SamHennessy/hlive"
. "github.com/SamHennessy/hlive/hhtml"
)
// HoverDemo is a live, interactive instance of the Hover example, served for
// the "Live Demo" iframe.
func HoverDemo() *l.Page {
hoverState := l.Box(" ")
hover := H2(
l.Style{"padding": "1em", "text-align": "center", "border": "solid"},
l.On("mouseEnter", func(ctx context.Context, e l.Event) {
hoverState.Set("Mouse enter")
}),
l.On("mouseLeave", func(ctx context.Context, e l.Event) {
hoverState.Set("Mouse leave")
}),
"Hover over me",
)
page := l.NewPage()
page.DOM().Title().Add("Hover Example")
page.DOM().Head().Add(
Link(Rel("stylesheet"), Href("https://cdn.simplecss.org/simple.min.css")))
page.DOM().Body().Add(
Header(
H1("Hover"),
P("React to hover events on the server"),
),
Main(
Div(hover),
Hr(),
Pre(Code(hoverState)),
),
)
return page
}