Question

我正在尝试为我的按钮添加一堆不同的颜色类，并允许任意添加其他类。所有这些都应该在悬停时变暗。为每种颜色编写button.(color):hover规则似乎很乏味，所以我写了这个，:after部分变暗，覆盖按钮背景。

但是，我无法根据需要让:after部分适合按钮的文本和背景。目前，它也暗示了文本。这里的想法是删除添加新按钮元素或新按钮颜色类的任何繁琐部分，因此我想避免为每种颜色添加额外的html或其他css规则。想法？

button {
    border: 0;
    padding: 1em;
    position: relative;
    cursor: pointer;
    background: none;
}
button:after {
    content: " ";
    transition: background-color .3s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
button:hover:after { background-color: rgba(0, 0, 0, 0.3); }
button.green { background-color: #6c842e; color: #ffffff; }
button.red { background-color: #ff4444; color: #ffffff; }

<button>Boop</button>
<button class="green">Boop</button>
<button class="red">Boop</button>

Answer 1

如何使用try { DirectoryWatchService watchService = new SimpleDirectoryWatchService(); // May throw watchService.register( // May throw new DirectoryWatchService.OnFileChangeListener() { @Override public void onFileCreate(String filePath) { // File created } @Override public void onFileModify(String filePath) { // File modified } @Override public void onFileDelete(String filePath) { // File deleted } }, <directory>, // Directory to watch <file-glob-pattern-1>, // E.g. "*.log" <file-glob-pattern-2>, // E.g. "input-?.txt" <file-glob-pattern-3>, // E.g. "config.ini" ... // As many patterns as you like ); watchService.start(); // The actual watcher runs on a new thread } catch (IOException e) { LOGGER.error("Unable to register file change listener for " + fileName); }？

＆＃13;

box-shadows

＆＃13;

button {
  border: 0;
  padding: 1em;
  position: relative;
  cursor: pointer;
  background: none;
}
button:hover {
  box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.2);
}
button.green {
  background-color: #6c842e;
  color: #ffffff;
}

＆＃13;

使用CSS：后按阴影按钮：悬停

1 个答案: