Repository: Textualize/textual

Issue:
Mouse movements example does not work
When I run the example at https://textual.textualize.io/guide/input/#mouse-movements in gnome-terminal all I can see is black screen, and nothing I do (apart from CTRL+C) seems to have any effect.

```
textual diagnose
```

# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.41.0 |
| Rich    | 13.6.0 |

## Python

| Name           | Value                                                                     |
|----------------|---------------------------------------------------------------------------|
| Version        | 3.11.2                                                                    |
| Implementation | CPython                                                                   |
| Compiler       | GCC 12.2.0                                                                |
| Executable     | /srv/home/porridge/.local/share/virtualenvs/reconcile-Vnvz65ja/bin/python |

## Operating System

| Name    | Value                                               |
|---------|-----------------------------------------------------|
| System  | Linux                                               |
| Release | 6.1.0-13-amd64                                      |
| Version | #1 SMP PREEMPT_DYNAMIC Debian 6.1.55-1 (2023-09-29) |

## Terminal

| Name                 | Value          |
|----------------------|----------------|
| Terminal Application | *Unknown*      |
| TERM                 | xterm-256color |
| COLORTERM            | truecolor      |
| FORCE_COLOR          | *Not set*      |
| NO_COLOR             | *Not set*      |

## Rich Console options

| Name           | Value               |
|----------------|---------------------|
| size           | width=87, height=27 |
| legacy_windows | False               |
| min_width      | 1                   |
| max_width      | 87                  |
| is_terminal    | True                |
| encoding       | utf-8               |
| max_height     | 27                  |
| justify        | None                |
| overflow       | None                |
| no_wrap        | False               |
| highlight      | None                |
| markup         | None                |
| height         | None                |





Discussion:
We found the following entries in the [FAQ](https://textual.textualize.io/FAQ/) which you may find helpful:


- [Why doesn't Textual support ANSI themes?](https://textual.textualize.io/FAQ/#why-doesn't-textual-support-ansi-themes)
- [No widget called TextLog](https://textual.textualize.io/FAQ/#no-widget-called-textlog)
- [Why do some key combinations never make it to my app?](https://textual.textualize.io/FAQ/#why-do-some-key-combinations-never-make-it-to-my-app)
- [Why doesn't the `DataTable` scroll programmatically?](https://textual.textualize.io/FAQ/#why-doesn't-the-`datatable`-scroll-programmatically)

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by [FAQtory](https://github.com/willmcgugan/faqtory)
It looks like the CSS for this example hasn't kept up with Textual updates. For example, TextLog should be RichLog, but more importantly the transparent layer no longer works following the changes to opacity in 25d72fe. Is this a bug?
For what it's worth, I don't think it really made sense that the `Ball` widget was still visible when its container had an opacity of 0%.

But this change might have inadvertently introduced a bug for layers with opacity. Here's a simple example adapted from [the docs for Layers](https://textual.textualize.io/guide/layout/#layers), with a binding that changes the opacity of `#box1`.

[Edit to add: I thought perhaps setting the `background` style with opacity would work, but this has a similar issue]

### Before v0.29.0

![before-screenshot](https://github.com/Textualize/textual/assets/101601846/d5cf4a50-9f4e-4b32-93fa-2c01d6f442cf)

### After v0.29.0

![after-screenshot](https://github.com/Textualize/textual/assets/101601846/56cda5e1-6c77-4336-a668-5adec361e338)


Fixing this example depends on #3676.

Resolving patch:
diff --git a/docs/examples/guide/input/mouse01.py b/docs/examples/guide/input/mouse01.py
--- a/docs/examples/guide/input/mouse01.py
+++ b/docs/examples/guide/input/mouse01.py
@@ -1,18 +1,8 @@
 from textual import events
 from textual.app import App, ComposeResult
-from textual.containers import Container
 from textual.widgets import RichLog, Static
 
 
-class PlayArea(Container):
-    def on_mount(self) -> None:
-        self.capture_mouse()
-
-    def on_mouse_move(self, event: events.MouseMove) -> None:
-        self.screen.query_one(RichLog).write(event)
-        self.query_one(Ball).offset = event.offset - (8, 2)
-
-
 class Ball(Static):
     pass
 
@@ -22,7 +12,11 @@ class MouseApp(App):
 
     def compose(self) -> ComposeResult:
         yield RichLog()
-        yield PlayArea(Ball("Textual"))
+        yield Ball("Textual")
+
+    def on_mouse_move(self, event: events.MouseMove) -> None:
+        self.screen.query_one(RichLog).write(event)
+        self.query_one(Ball).offset = event.screen_offset - (8, 2)
 
 
 if __name__ == "__main__":


Test patch: