JavaFX/CSS: 在鼠标悬停时使按钮的原始颜色变亮
JavaFX/CSS: Brighten button's original color on mouse-over
我有各种按钮,每个按钮都有自己的背景颜色 (-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 文件.
第二个问题:是否有一种方法可以通过 css 指定按钮的颜色在鼠标悬停时应保留其 rgb 值并仅添加 a 值 0.7?
提前致谢!
My first problem: [...]
这只是定义的层次结构,e。 G。在 FXML 文件中为一个控件创建的背景颜色样式命令将始终覆盖在 CSS 文件中为同一控件创建的样式命令。它的行为与纯 CSS 和一组 #id 和一组 .class 控件的行为相同。 e。 G。 id 语句中定义的背景颜色将覆盖为 class 定义的背景颜色。所以这是标准行为,您无法更改它。
Second problem: [...]
没有像“-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" />
或者你可以这样做:
控制器Class:
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" />
我有各种按钮,每个按钮都有自己的背景颜色 (-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 文件.
第二个问题:是否有一种方法可以通过 css 指定按钮的颜色在鼠标悬停时应保留其 rgb 值并仅添加 a 值 0.7?
提前致谢!
My first problem: [...]
这只是定义的层次结构,e。 G。在 FXML 文件中为一个控件创建的背景颜色样式命令将始终覆盖在 CSS 文件中为同一控件创建的样式命令。它的行为与纯 CSS 和一组 #id 和一组 .class 控件的行为相同。 e。 G。 id 语句中定义的背景颜色将覆盖为 class 定义的背景颜色。所以这是标准行为,您无法更改它。
Second problem: [...]
没有像“-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" />
或者你可以这样做:
控制器Class:
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" />