Question

警告：我现在已经学习了几年但从未教过最佳实践，而且往往只是按照我发现的工作，我提前道歉。这也是我的第一篇文章，因此非常感谢任何有关如何发布的有用建议。

我试图解决的难题是如何使用CSS将鼠标悬停在徽标上方，更改徽标下方的3个变量，背景颜色，徽标图像和文本颜色。

我理解如何更改例如：徽标图片A - ＆gt;徽标图片B悬停在

上方

但是，我不知道如何使用单个悬停动作更改多个元素，我很好奇是否可以这样做。

这是我到目前为止所处的位置：

<div class="alphawrapper">
<div class="wrapper" >
<div class="wrapper-inner">

<div id="alogo">
<a href="http://www.vimeo.com/user18299669">
<img src="splashlogo.png" alt="Orange Fishgrenade Logo"> </a>
<a href="/contact.html">            
<h1 id="atext"> FG! </h1> </a>   
</div>

<div id="blogo">
<a href="http://www.vimeo.com/user18299669">
<img src="splashlink.png" alt="White Fishgrenade Logo"> </a>
<a href="/contact.html">
<h1 id="btext"> FG! </h1> </a> 
</div>

</div>
</div>
</div>

.alphawrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
text-transform: uppercase;
text-align: center;
text-rendering: optimizeLegibility; 
}

.wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ff6600;
text-transform: uppercase;
text-align: center;
text-rendering: optimizeLegibility;
}

.logo a:hover {
}

.wrapper-inner {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    margin-top: 15%;
}

.wrapper:before {
    content: '';
    margin-right: -15.25em;
}

#alogo {
    position:absolute;
    z-index: 2;
}

#atext {
    font-size: 40px;
    line-height: 1;
    font-family: futura bold,Helvetica,Arial,sans-serif;
    margin-bottom: 0;
    color: #ffffff; 
    z-index: 2;
}

#blogo {
    position: absolute;
    z-index: 1;
}

#btext {
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-family: Helvetica,Arial,sans-serif;
    margin-bottom: 0;
    color: #ff6600; 
    z-index: 1;
}

所以我的想法是你将鼠标悬停在徽标上，它本质上从图像1变为图像2。但是，我真的不知道如何更改3个单独的元素和我正在尝试的所有内容.logo a：hover {}甚至没有接近它，这就是为什么我把它留空了。

我的逻辑是，我创建了一个白色的.alphawrapper，它位于橙色的辅助.wrapper下面。

我使用z-index将另外两个元素，徽标和文本叠加在一起。如何在我脑海中起作用是a：hover动作会发生，然后.wrapper的橙色优势将被.alphawrapper的白色覆盖，然后#blogo和#btext的z-index将变为3例如，超过#alogo / #atext。

我假设我以某种方式使这个问题复杂化，不知道这个术语的技术术语，或者可能因为我还没有完成而无法完成经过一段时间的搜索后，我会对此进行任何示例或教程。

如果您已经走到这一步，任何意见都会非常感谢并感谢您的阅读。

在悬停时更改背景颜色，徽标和文本颜色......仅使用CSS是否可以实现？

0 个答案: