Javafx 选定文本上的悬停效果

我有一个问题，我不能解决与悬停效果的文本

Text t1 = new Text();

Text t2 = new Text();

Text t3 = new Text();

Text t4 = new Text();

---

当我选择一个文本，我想改变背景，例如灰色。但我不知道如何解决的棘手部分是如何从先前选定的文本中删除背景色？它的工作原理应该类似于切换按钮，但带有文本。

首先创建一个css类

.text:hover { 
    -fx-fill: blue;   
}

.text:pressed { 
   -fx-fill: blue;   
}

.text-selected { 
    -fx-fill: blue;
}

然后创建一个全局变量

Text selectText;

然后添加以下内容：

scene.getStylesheets().add(Teste.class.getResource("text.css").toExternalForm();

t1.getStyleClass().add("text");
t2.getStyleClass().add("text");

t1.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent arg0) {
        if (selectText != null) {
            selectText.getStyleClass().remove("text-selected");
        }
        t1.getStyleClass().add("text-selected");
        selectText = t1;
    }
});

t2.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent arg0) {
        if (selectText != null) {
            selectText.getStyleClass().remove("text-selected");
        }
        t2.getStyleClass().add("text-selected");
        selectText = t2;
    }
});

scene.getStylesheets（）.add（Teste.class.getResource（“text.css”）.toExternalForm（）；
t1.getStyleClass（）.add（“文本”）；
t2.getStyleClass（）.add（“文本”）；
t1.setOnMouseClicked（新的EventHandler（）{
@凌驾
公共无效句柄（MouseEvent arg0）{
如果（选择文本！=null）{
selectText.getStyleClass（）.remove（“选中的文本”）；
}
t1.getStyleClass（）.add（“选中的文本”）；
选择text=t1；
}
});
t2.setOnMouseClicked（新的EventHandler（）{
@凌驾
公共无效句柄（MouseEvent arg0）{
如果（选择文本！=null）{
selectText.getStyleClass（）.remove（“选中的文本”）；
}
t2.getStyleClass（）.add（“选中的文本”）；
选择text=t2；
}
});

一个

文本

对象是一个

形状

，它定义了一组比控件更有限的样式属性；例如，它没有背景。如果您想在UI中设置文本样式，您可能更喜欢

标签

而不是

文本

。另一个选项是将

文本

包装在s中使用某种类型的

区域

（例如

堆栈窗格

）并将背景应用于该区域。但这会使代码稍微复杂化

以下是一些解决方案：第一种方法不使用CSS，而是使用

标签

s，只是根据需要设置样式。第二种方法使用不同的方法，您可以使用“选择行为”已在

ToggleButton

中定义，但要使切换按钮看起来像纯文本。这可能是最好的解决方案，因为它使用现有的功能，只是使用CSS更改外观。第三个是对第一个的改进，您可以将样式分解为CSS，但可以自己实现选择

解决方案1：所有Java:

创建用于存储选定文本的属性：

ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();

selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
    if (oldSelectedText != null) {
        oldSelectedText.setStyle("");
    }
    if (newSelectedText != null) {
        newSelectedText.setStyle("-fx-background-color: lightgray;");
    }
});

.label:selected {
    -fx-background-color: lightgray ;
}

向每个文本注册鼠标侦听器，使其在单击时成为选定文本：

Label t1 = new Label("One");

Label t2 = new Label("Two");

Label t3 = new Label("Three");

Label t4 = new Label("Four");

Stream.of(t1, t2, t3, t4).forEach(t -> 
    t.setOnMouseClicked(event -> selectedText.set(t)));

解决方案2：使用样式类似纯文本的切换按钮：

这实际上是我的首选解决方案：使用已经为

ToggleButton

定义的选择行为，只需使用CSS来更改切换按钮的外观

ToggleButton t1 = new ToggleButton("One");
ToggleButton t2 = new ToggleButton("Two");
ToggleButton t3 = new ToggleButton("Three");
ToggleButton t4 = new ToggleButton("Four");

ToggleGroup tg = new ToggleGroup();
Stream.of(t1, t2, t3, t4).forEach(t -> t.setToggleGroup(tg));

使用以下外部样式表：

.toggle-button, .toggle-button:selected , .toggle-button:hover,
.toggle-button:armed, .toggle-button:focused, .toggle-button:selected:focused {

    -fx-color: -fx-base ;
    -fx-background-color: transparent ;
    -fx-background-insets: 0 ;
    -fx-background-radius: 0 ;
    -fx-padding: 0 ;
    -fx-text-fill: -fx-text-background-color ;
}

.toggle-button:selected, .toggle-button:selected:focused {
    -fx-background-color: lightgray ;
}

解决方案3:Java与css伪类：

在第一个解决方案中使用选定文字的特性，但操作样式类而不是直接操作样式：

ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();
PseudoClass selected = PseudoClass.getPseudoClass("selected");

selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
    if (oldSelectedText != null) {
        oldSelectedText.pseudoClassStateChanged(selected, false);
    }
    if (newSelectedText != null) {
        newSelectedText.pseudoClassStateChanged(selected, true);
    }
});

然后使用外部样式表，并将所需的任何样式应用于选定文本：

ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();

selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
    if (oldSelectedText != null) {
        oldSelectedText.setStyle("");
    }
    if (newSelectedText != null) {
        newSelectedText.setStyle("-fx-background-color: lightgray;");
    }
});

.label:selected {
    -fx-background-color: lightgray ;
}

---

使用这些解决方案中的任何一种，您都可以根据需要编辑样式。

这是用于鼠标悬停时的悬停效果。我需要在单击文本时保持悬停效果。关于解决方案1和3：

text

是一个

形状，因此没有背景。当然，感谢您指出这一点。我更新了解决方案I在上。我发现了问题。最后一个问题。如何使第一个标签始终处于默认选中状态？对于解决方案1和3，在将侦听器添加到
selectedText
并创建标签后，执行
selectedText.set（t1）；
。对于解决方案2，只需执行
t1.setSelected（true）；