Question

我正在尝试实现一个菜单，当将鼠标悬停在菜单上的每个项目上时，位于页面顶部的图像会发生变化。到目前为止，我不知道该如何执行悬停效果，我将图像放置在了第一个div部分，但是我想我必须将其余图像放置，但是我不知道如何链接图像的每个项目每个图像的菜单。其他一切都很好。

是否可以使用CSS做到这一点，或者唯一的方法就是使用javascript

在此页面中，您可以看到一个非常接近我想要的示例。 Laura Meroni

这是菜单的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;
}

Answer 1

@ManuelPavía，您是否希望交互是当用户像

那样停留在锚点上时

<a href="#">Valores L&L</a>

图像立即生效吗？

如果可以，您可以这样做：

a:hover + img { //img stuff }

Answer 2

使用class.hover {/path/to/image} 以及为什么不尝试使用引导程序，使用引导程序更容易实现任何CSS

在菜单上创建悬停效果

2 个答案: