鼠标悬停突出显示动态CSS电子表格(Mouseover highlights with dynamic CSS spread sheets)

鼠标悬停突出显示动态CSS电子表格(Mouseover highlights with dynamic CSS spread sheets)

我允许我的客户选择一种自定义的“主题”颜色，它基本上设置标题，按钮颜色和其他页面元素的背景颜色。 但是，当谈到亮点时，我不知道如何为此编程。 由于我不知道颜色是怎么进来的，我如何设置翻转突出显示mouseover上的两个阴影？

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

是否有一个css规则做一个亮点是重量轻或基础颜色的一些较轻的版本？

我不能使用不透明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>

I allow my customers to select a custom "theme" color which essentially sets the background color of headers, button colors, and other page elements. However, when it comes to highlights, I'm at a loss how to program for that. Since I don't know what the color is coming in, how do I set rollover highlights a couple of shades lighter on mouseover?

For eg: Color sets theme color to red. On mouseover on a button, I want to set it to pink. Color sets theme color to blue. On mouseover, I want to set it to light blue.

Is there a css rule for doing a highlight that is a % lighter or some lighter version of the base color?

I can't use opacity b/c it changes the link text as well:

<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>

最满意答案

这对我来说非常好，而且相当简单，希望能够解决您的问题，并且对您也有用。

您可以使用CSS属性Opacity

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

This works for me pretty well and its fairly simple, hope it be resolve your issue and will be useful for you too.

You can use CSS property Opacity

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