根据背景图像/颜色更改文本颜色

Question

在这个页面上,我有第一个div作为暗图像,第二个作为浅色背景.

我希望侧边栏文字颜色在暗图像上亮,在灯光上暗.

我将如何根据div背景中的颜色设置颜色？只需要两种颜色选择.

这是我正在寻找的另一个例子http://www.acnestudios.com/ example html:

 <div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>

Answer 1

我喜欢使用这个插件http://aerolab.github.io/midnight.js/你可以尝试一下

Answer 2

<div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>


    <script>

    $(document).ready(function() {
        $("#home_top_t_wrap").hover(function() {
            $("body").css("background-color","light"); //change light to your color
        });
    $("#the_market_container").hover(function() {
            $("body").css("background-color","dark"); //change dark to your color
        });

    });
    </script>

我尝试了 div 悬停。希望这可以帮助