鼠标悬停高亮显示动态 CSS 电子表格答案

【问题标题】：Mouseover highlights with dynamic CSS spread sheets鼠标悬停高亮显示动态 CSS 电子表格
【发布时间】：2015-10-05 19:13:25
【问题描述】：

我允许我的客户选择一种自定义的“主题”颜色，该颜色实质上是设置标题、按钮颜色和其他页面元素的背景颜色。然而，当谈到亮点时，我不知道如何为此编程。由于我不知道颜色是什么，我如何设置翻转突出显示鼠标悬停时较浅的几个阴影？

例如：颜色将主题颜色设置为红色。在鼠标悬停在按钮上时，我想将其设置为粉红色。颜色将主题颜色设置为蓝色。在鼠标悬停时，我想将其设置为浅蓝色。

是否有一个 css 规则来做一个比基色更亮或更亮版本的高亮？

我不能使用 opacity b/c 它也会改变链接文本：

    <style>
.highlight{background-color:red; opacity:1;}
.highlight:hover{background-color:red; opacity:.5;}
</style>


    <ul>
        <li class="highlight" style="display:block;height:100px;width:100px;">
            hi
        </li>
    </ul>

【问题讨论】：

你对 jquery 持开放态度吗？因为我知道你可以用一些js来完成这个。而使用 css，我对主题选择器的可变性方面不知所措

标签： css

【解决方案1】：

这对我来说效果很好，而且相当简单，希望它能解决您的问题，并且对您也有用。

您可以使用 CSS 属性 Opacity

.highlight{background: rgba(200, 54, 54, 0.9); }
.highlight:hover{background: rgba(200, 54, 54, 0.4); }

【讨论】：

是的，我不能使用不透明度，因为它会影响标签中的所有内容。
你可以试试这样我已经更新了答案中的代码，它只会使背景颜色透明，而不是标签中的所有内容，如果它适合你，请告诉我，谢谢跨度>
问题是我不知道它的红色进来了。基本上我必须采用未知颜色的十六进制并使其更亮。我想我可以将十六进制转换为 rgba 并这样做？
没错，rgba中的hex是可以转换使用的

【解决方案2】：

我知道你没有要求 jquery，但也许这个解决方案会让你感兴趣

$(document).ready(function() {
	$('.color').click(function() {
    	var r = $(this).attr('r');
        var g = $(this).attr('g');
        var b = $(this).attr('b');
        $('.highlight').css('background-color', 'rgba('+ r + ','+ g + ','+ b + ', 1)');
        $('.highlight').mouseenter(function() {
        	$(this).css('background-color', 'rgba('+ r + ','+ g + ','+ b + ', 0.5)');
        });
        $('.highlight').mouseleave(function() {
        	$(this).css('background-color', 'rgba('+ r + ','+ g + ','+ b + ', 1)');
        });
    });
});

td {
    border:1px solid lightgray;
    padding: 5px;
}
.highlight {
    background-color: gray;
    color: black;
}
.highlight:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="color" r="0" g="0" b="255">Blue Theme</button>
<button class="color" r="255" g="0" b="0">Red Theme</button>
<button class="color" r="150" g="0" b="255">Purple Theme</button>
<br/><br/>
<table>
    <tr>
        <td class="highlight">Something here</td>
        <td class="highlight">Something here</td>
        <td class="highlight">Something here</td>
    </tr>
    <tr>
        <td class="highlight">Something here</td>
        <td class="highlight">Something here</td>
        <td class="highlight">Something here</td>
    </tr>
    <tr>
        <td class="highlight">Something here</td>
        <td class="highlight">Something here</td>
        <td class="highlight">Something here</td>
    </tr>
</table>

【讨论】：