Html 当悬停时，同时影响相邻的两侧div

发布于06月24日

我有一个导航wine 吧，.navbar英镑，有7个直系子女，navbar-item英镑.

目前，我将其设置为当您将鼠标悬停在导航栏项目上时，它会将其宽度和高度增加20px.但我想要的是，当你将鼠标悬停在其中一件物品上时，它的高度和宽度会增加20px，它会增加Directly Neighboringdiv(所以左右div，除非它在边缘上)，宽度和高度增加10px.

我想要的一个很好的例子就是MacOS应用程序栏效果.

代码:

body {
  background-color: #D3D3D3;
}

.navbar {
    width: 600px;
    height: 50px;
    border-radius: 999px;
    background-color: white;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.navbar-item {
    border: 1px solid black;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.navbar-item:hover{
    width: 70px;
    height: 70px;
}

<div class="navbar">
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
</div>

我try 使用.navbar-item:hover + .navbar-item，但这只是更改了实际悬停的div右侧的宽度和高度.

我读到了这个问题:How to affect other elements when one element is hovered

但它没有回答我的问题.

body { background-color: #D3D3D3; } .navbar { width: 600px; height: 50px; border-radius: 999px; background-color: white; padding: 5px; display: flex; align-items: center; justify-content: space-around; } .navbar-item { border: 1px solid black; height: 50px; width: 50px; border-radius: 50%; transition: .3s; } .navbar-item:hover { /* main element */ scale: 1.5; } /* direct neighbors */ .navbar-item:hover + *, .navbar-item:has(+ .navbar-item:hover){ scale: 1.2; }

<div class="navbar"> <div class="navbar-item"></div> <div class="navbar-item"></div> <div class="navbar-item"></div> <div class="navbar-item"></div> <div class="navbar-item"></div> <div class="navbar-item"></div> <div class="navbar-item"></div> </div>

Html 当悬停时，同时影响相邻的两侧div

推荐答案

Html相关问答推荐

将文本区域标签的内容着色为SON(带有 colored颜色 )

你能让Cypress测试为p—fileUpload做文件上传吗？

Chrome和Safari浏览器中的CSS3动画不同

如何使我的组织 struct 图的连接线响应？

Angular /HTML5不会播放本地文件夹中的音频mpeg

未知高度正在应用于前标记

文本幻灯片显示动画

带有下拉菜单的完整css导航-链接不起作用？

希望平稳过渡到悬停状态

如何使单选按钮在被 Select /选中时看起来像这样的设计？

我的 *ngFor 中的 array.reverse() 在生产中不起作用

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

调整屏幕大小时标题在图像下方重叠 - HTML

从垫分页器中删除输入边框

如何动态调整彼此重叠的两个 div 的大小，使它们在增长时保持相同的高度

是否可以为长 huxtable 固定头部？

如何清除html输入中的文本

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示？

HTML 标记未在页面上展开

用 flexbox 和 overflow 覆盖