JavaFX/CSS：在鼠标悬停时使按钮的原始颜色变亮

Question

我有各种按钮，每个按钮都有自己的背景颜色（-fx-background-color: rgb (xxx,xxx,xxx)。按钮的颜色在 .fxml 文件中定义。

现在我想在 .css 文件中定义每个按钮的背景颜色，以便在鼠标悬停时变亮。

例如：Button1 的常规颜色是 -fx-background-color: rgb(176,30,0) 在鼠标悬停时，它应该更改为 -fx-background-color: rgba(176,30,0,0.7)

我的第一个问题：fxml 文件中定义的 -fx-background-color 覆盖了 .css 中定义的 .button:hover{-fx-background-color: rgba(176,30,0,0.7);}文件。

第二个问题：有没有办法通过 css 指定按钮的颜色在鼠标悬停时应该保留其 rgb 值，并且只添加 0.7 的值？

提前致谢！

Answer 1

我的第一个问题：[...]

e 只是定义的层次结构。 G。在 FXML 文件中创建的一个控件的背景颜色样式命令将始终覆盖在 CSS 文件中创建的同一控件的样式命令。它的行为就像你有一个纯 CSS 和一个 set #id 和一个 set .class 作为控件一样。 e。 G。在 id 语句中定义的背景颜色将覆盖为类定义的背景颜色。所以这是标准行为，你不能改变它。

第二个问题：[...]

没有像“-fx-background-transparency: 0.7;”这样的 CSS 命令。您可以使用 CSS 来执行此操作（并且无需在 FXML 中覆盖）：

CSS 文件：

.my-btn-class {
    -fx-background-color: rgb(176, 30, 0);
}

.my-btn-class:hover {
    -fx-background-color: rgba(176, 30, 0, 0.7);
}

FXML 文件：

  <?xml version="1.0" encoding="UTF-8"?>

    <?import javafx.scene.control.Button?>


    <Button styleClass="my-btn-class" stylesheets="@styling.css" text="Button" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller" />

或者你可以这样做：

控制器类：

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

import java.net.URL;
import java.util.ResourceBundle;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class Controller implements Initializable {

    @FXML
    private Button button;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        button.hoverProperty().addListener(((observable, oldValue, newValue) -> makeButtonTransparent(button, newValue)));
    }

    private void makeButtonTransparent(Button button, boolean transparent) {

        // Get the current style statements:
        String currentStyle = button.getStyle();

        // Check if there is a styling statement for background color with rgb or rgba:
        Pattern pattern = Pattern.compile("-fx-background-color: rgb(a?)\\(([\\d,\\s.])*\\);");
        Matcher matcher = pattern.matcher(currentStyle);

        String currentBackgroundColorStyle;
        if (matcher.find()) {
            // Extract the existing background color statement:
            currentBackgroundColorStyle = currentStyle.substring(matcher.start(), matcher.end());
        } else
            // No statement for background color in rgb(a) found:
            return;

        // Get the rgb values from the string:
        int[] rgb = new int[3];
        matcher = Pattern.compile("\\d{1,3}").matcher(currentBackgroundColorStyle);

        for (int i = 0; i < 3; i++) {
            if (matcher.find())
                rgb[i] = Integer.parseInt(currentBackgroundColorStyle.substring(matcher.start(), matcher.end()));
        }

        if (transparent)
            // Replace the background color statement with transparency value:
            button.setStyle(currentStyle.replace(currentBackgroundColorStyle, String.format("-fx-background-color: rgba(%d, %d, %d, 0.7);", rgb[0], rgb[1], rgb[2])));
        else
            // Replace the background color statement without transparency value:
            button.setStyle(currentStyle.replace(currentBackgroundColorStyle, String.format("-fx-background-color: rgb(%d, %d, %d);", rgb[0], rgb[1], rgb[2])));
    }
}

FXML 文件：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>


<Button fx:id="button" style="-fx-background-color: rgb(176, 30, 0); -fx-border-color: blue;" text="Button" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller" />