Question

我有一个固定的标题，我后面有一个幻灯片。基本上标题有一个透明的背景，它只是幻灯片上的文字。现在，当我的滑块图像发生变化时，我正在尝试更改标题字体（包括我的导航）颜色。我遇到的问题是我的滑块纯粹是CSS3，我无法找到一种方法来检测图像何时被更改以更改我的标题字体。

这是我的滑块代码：的 HTML

<div id="slider">
    <figure>
        <img src="images/eg1.jpg" alt="" class="imageA">
        <img src="images/eg2.jpg" alt="" class="imageB">
        <img src="images/eg3.jpg" alt="" class="imageC">        
    </figure>
</div>

CSS

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { 
    overflow: hidden; 
    height: 100vh; 
}
div#slider figure img {
    width: 50%; 
    float: left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    background:cover;
}
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite; 
}

这是我的标题HTML。我不认为CSS是必需的，但如果需要，请告诉我，我会把它放在这里：

<header>
    <div id="logo">
        <h2>The Market</h2>
    </div>

    <nav id="headNav">
        <ul>
            <li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
            <span>|</span>
            <li data-menuanchor="collections"><a href="#collections">Collections</a></li>
            <span>|</span>
            <li data-menuanchor="showroom"><a href="#showroom">Showroom</a></li>
            <span>|</span>
            <li data-menuanchor="contact"><a href="#contact">Contact</a></li>
            <span>|</span>
            <li data-menuanchor="about"><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

最后这里是我用来更改图像更改时的标题文本颜色的javascript。它不起作用，但这是我尝试过的。我真的很感激有关如何修复脚本的任何帮助：

<script>
    $('img.imageA').on('load',function(){
        document.getElementById("header").style.color = "red";
    });
</script>

谢谢：）

Answer 1

简单的解决方案是使用相同的动画时序来改变文本的颜色，试试这个：

header{animation : 15s colorful}
@keyframes colorful {
0% {  color:blue}
20% { color:blue}
25% { color:purple}
45% { color:purple}
50% { color:purple}
70% { color:purple}
75% { color:pink}
95% { color:pink}
100% { color:cyan}
}

幻灯片显示图像更改时如何更改标题字体和导航链接颜色

1 个答案: