警告:我现在已经学习了几年但从未教过最佳实践,而且往往只是按照我发现的工作,我提前道歉。这也是我的第一篇文章,因此非常感谢任何有关如何发布的有用建议。
我试图解决的难题是如何使用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。
我假设我以某种方式使这个问题复杂化,不知道这个术语的技术术语,或者可能因为我还没有完成而无法完成经过一段时间的搜索后,我会对此进行任何示例或教程。
如果您已经走到这一步,任何意见都会非常感谢并感谢您的阅读。