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

时间:2015-02-03 22:40:16

标签: javascript html css

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

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

我理解如何更改例如:徽标图片A - >徽标图片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。

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

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

0 个答案:

没有答案