diff --git a/docs/styles/links/link_hover_background.md b/docs/styles/links/link_hover_background.md index e69de29bb..89e1661c1 100644 --- a/docs/styles/links/link_hover_background.md +++ b/docs/styles/links/link_hover_background.md @@ -0,0 +1,69 @@ +# Link-hover-background + +The `link-hover-background` sets the background color of the link. + +!!! note + + `link-hover-background` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + +## Syntax + +```sass +link-hover-background: ; +``` + +--8<-- "docs/styles/snippets/color_css_syntax.md" + +--8<-- "docs/styles/snippets/percentage_syntax.md" + +## Example + +The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-hover-background`. + +It also shows that `link-hover-background` does not affect hyperlinks. + +=== "Output" + + ![](./demos/link_hover_background_demo.gif) + + !!! note + + The GIF has reduced quality to make it easier to load in the documentation. + Try running the example yourself with `textual run docs/examples/styles/link_hover_background.py`. + +=== "link_hover_background.py" + + ```py hl_lines="8-9 12-13 16-17 20-21" + --8<-- "docs/examples/styles/link_hover_background.py" + ``` + + 1. This label has an hyperlink so it won't be affected by the `link-hover-background` rule. + 2. This label has an "action link" that can be styled with `link-hover-background`. + 3. This label has an "action link" that can be styled with `link-hover-background`. + 4. This label has an "action link" that can be styled with `link-hover-background`. + +=== "link_hover_background.css" + + ```css hl_lines="2 6 10" + --8<-- "docs/examples/styles/link_hover_background.css" + ``` + + 1. This will only affect one of the labels because action links are the only links that this rule affects. + 2. The default behavior for links on hover is to change to a different background color, so we don't need to change anything if all we want is to add emphasis to the link under the mouse. + +## CSS + +```css +link-hover-background: red 70%; +link-hover-background: $accent; +``` + +## Python + +```py +widget.styles.link_hover_background = "red 70%" +widget.styles.link_hover_background = "$accent" + +# You can also use a `Color` object directly: +widget.styles.link_hover_background = Color(100, 30, 173) +```