帶動態CSS電子表格的鼠標懸停高亮

我允許我的客戶選擇一種自定義的「主題」顏色，它基本上設置了標題，按鈕顏色和其他頁面元素的背景顏色。但是，當談到亮點時，我不知道如何爲此編程。由於我不知道顏色是怎麼進來的，我如何設置翻轉突出顯示mouseover上的兩個陰影？帶動態CSS電子表格的鼠標懸停高亮

例如：顏色將主題顏色設置爲紅色。在按鈕上的鼠標懸停時，我想將其設置爲粉紅色。顏色將主題顏色設置爲藍色。在鼠標懸停時，我想將其設置爲淺藍色。

是否有一個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>

來源

2015-10-05 Jeff Shain

你開jQuery的？因爲我知道你可以用一些js來完成這個任務。而與CSS，即時通訊與你的主題選擇器的變異性方面的損失是的 – indubitablee

這對我的作品非常好和非常簡單的，希望它可以解決您的問題，將是有益的你也是。

您可以使用CSS屬性透明度

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

來源

2015-10-05 19:17:37 CreativePS

是的，我不能使用不透明度，因爲它影響標籤內的一切。 –

你可以嘗試這樣的事情我已經更新了我的答案中的代碼，它只會使背景顏色透明，而不是標籤中的所有東西，讓我知道它是否適用於您，謝謝 – CreativePS

問題是我不知道它的紅色進來。基本上我必須採取一個未知的顏色六角形，並使其更輕。我想我可以將十六進制轉換爲rgba並以這種方式進行操作？ –

我知道你沒有問jQuery的，但也許這個解決方案將你感興趣

$(document).ready(function() { 
 
\t $('.color').click(function() { 
 
    \t 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() { 
 
     \t $(this).css('background-color', 'rgba('+ r + ','+ g + ','+ b + ', 0.5)'); 
 
     }); 
 
     $('.highlight').mouseleave(function() { 
 
     \t $(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>

來源

2015-10-05 20:56:10 indubitablee

帶動態CSS電子表格的鼠標懸停高亮

回答

相關問題