html - 在菜单上创建悬停效果
问题描述
我正在尝试实现一个菜单,当将鼠标悬停在菜单上的每个项目上时,放置在页面顶部的图像会发生变化。到目前为止,我不知道如何做悬停效果,我将图像放在第一个 div 部分,但我想我必须把其余的图像,但我不知道如何链接每个项目每个图像的菜单。其他一切工作正常。
是否可以使用 CSS 来做到这一点,或者唯一的方法是使用 javascript 来做到这一点
在此页面中,您可以看到一个非常接近我想要的示例。 劳拉·梅罗尼
这是菜单的html:
<div class="header-top">
<img src="https://leyandlaw.callibree.com/wp-content/uploads/2018/10/IMAGENES-MENU.jpg" class="responsive" alt="">
</div>
<div class="flex-container">
<div class="col-1">
<img src="https://leyandlaw.callibree.com/wp-content/uploads/2018/10/leyandlay-abogados.jpg" class="logo-responsive" alt="">
</div>
<nav class="col-2" >
<ul>
<li>
<a href="#">Colaboración con la prensa</a>
<img src="" alt="">
</li>
<li>
<a href="#">Valores L&L</a>
<img src="" alt="">
</li>
<li>
<a href="#">Blog</a>
<img src="" alt="">
</li>
<li>
<a href="#">Contacto</a>
<img src="" alt="">
</li>
</ul>
</nav>
<nav class="col-3">
<ul>
<li>
<a href="#">Especialidades</a>
<img src="" alt="">
</li>
<li>
<a href="#">Confían en nosotros</a>
<img src="" alt="">
</li>
<li>
<a href="#">Desayunos L&L</a>
<img src="" alt="">
</li>
<li>
<a href="#">Equipo</a>
<img src="" alt="">
</li>
</ul>
</nav>
</div>
这是我拥有的 CSS:
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
}
.header-top{
background: #fff;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.responsive{
width: 100%;
}
.responsive-fondo {
width: 100%;
position: absolute;
top: 0;
z-index: -20;
}
li a:hover> .responsive-fondo {
z-index: 2;
left: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo-responsive{
height: auto;
width: 100%;
max-width: 400px;
}
.flex-container {
display: flex;
align-items: stretch;
background-color: #fff;
padding: 40px;
}
.col-1{
flex-grow: 3;
}
.col-2{
flex-grow: 2;
margin-top: 100px;
}
.col-3{
flex-grow: 2;
margin-top: 100px;
}
ul {
list-style: none;
margin: 0px
}
li a {
z-index: 1;
font-weight: 300;
color: #000000;
text-decoration: none;
font-size: 26px;
font-family: "Raleway" sans-serif;
line-height: 1.8em;
}
li:nth-child(1) {
padding-top: 0px;
}
解决方案
使用class.hover {/path/to/image}
以及为什么不尝试使用引导程序,使用引导程序更容易实现任何 css
推荐阅读
- java - 执行 hql 查询时出错
- google-chrome - Serenity BDD 不要删除浏览器内存
- r - R 语言:增强的 Dickey Fuller 测试的结果是什么意思?
- python - 如何关闭另一个班级的kivy pop?
- javascript - chrome控制台中是否有粘贴功能?
- laravel - 如何在 Laravel 5.4 中显示调试器
- vba - 使用 VBA 将数字转换为单词
- parsing - 如何解析 FLOOR(AVG(SomeToken)) 等字符串并检查它是否有效并映射到实际函数?
- reactjs - 我会通过在我的 action.type 中使用 Symbol 来提高性能吗?
- java - 如果使用常规 if 循环,Java 会抛出 ArrayIndexOutOfBoundsException,但如果使用增强的 for 循环则不会。为什么?