Html Css悬停在div上会导致它旁边的div变小吗？

大家好，我正在制作一个可以悬停的、有一定宽度和高度的div。它们彼此并排地坐在一张桌子上（td元素中的一张桌子中放置了4个div）。我遇到的问题是，每次我将鼠标悬停在一个div上，打开时旁边放置了另一个div，就会导致旁边的div变小（？）我甚至不知道发生了什么，但这只会导致td内部收缩，整个td扩张。 我想知道是否有一种方法可以使td和div保持固定的大小（很小，并且不会在旁边的td扩张时导致td扩张）

例如，如果我将鼠标悬停在文本为2的div上，则文本为1的div将保持关闭状态（当您不悬停在任何对象上时的外观）

我只能使用css和html，我不能用一个重要的id来说明原因，因为某些原因，我编辑的网站不允许id

提前感谢所有的帮助者

.Scrollbox
{
背景：rgba（237,41,57,0.6）；
宽度：300px；
高度：250px；
边框：1px实心#ffffff；
溢出y：滚动；
位置：相对位置；
过渡：高度1秒；
文本对齐：居中；
溢出：隐藏；
字体系列：“Poiret One”，草书；
}
.滚动框：悬停
{
高度：500px；
溢出y：滚动；
}

12
34

您的转换做了一些奇怪的事情，所以我将其删除

编辑：

我根据您的要求更改了代码。我不确定您的

overflow-y:scroll；

为什么在那里。我以为您希望滚动这些内容，所以我拿出了以前做的一些内容

我留下了下面的解释，以防您正在寻找其他具有

overflow-y:scroll；

功能的东西。它可能在将来对您有所帮助

新代码只是使用

td

上的类，并将其垂直对齐到顶部。这比将所有

tr

作为目标来执行此操作要好，因为这可能会在您正在使用的另一个表的其他地方给您带来不希望的结果

我把这个类也改成了小写，因为大多数人都是这样做的

以前的解决方案信息：

实现这一点的一种方法是将

css

类放在

td

元素。然后更改内部

div

的高度并设置

td

要有

overflow-y：根据需要滚动

。但您也必须 让

td

元素

display:block

，我不太喜欢它 正在进行。我建议将这些更改为

div

s，以模仿您的

td

s正在做

td.scrollbox
{
垂直对齐：顶部；
}
td.scrollbox分区
{
背景：rgba（237,41,57,0.6）；
宽度：300px；
高度：250px；
边框：1px实心#ffffff；
溢出y：滚动；
位置：相对位置；
文本对齐：居中；
溢出：隐藏；
字体系列：“Poiret One”，草书；
}
td.滚动框：悬停div
{
高度：500px；
}

1.
2.
3.
4.

您的转换做了一些奇怪的事情，所以我将其删除

编辑：

我根据您的要求更改了代码。我不确定您的

overflow-y:scroll；

为什么在那里。我以为您希望滚动这些内容，所以我拿出了以前做的一些内容

我留下了下面的解释，以防您正在寻找其他具有

overflow-y:scroll；

功能的东西。它可能在将来对您有所帮助

新代码只是使用

td

上的类，并将其垂直对齐到顶部。这比将所有

tr

作为目标来执行此操作要好，因为这可能会在您正在使用的另一个表的其他地方给您带来不希望的结果

我把这个类也改成了小写，因为大多数人都是这样做的

以前的解决方案信息：

实现这一点的一种方法是将

css

类放在

td

元素。然后更改内部

div

的高度并设置

td

要有

overflow-y：根据需要滚动

。但您也必须 让

td

元素

display:block

，我不太喜欢它 正在进行。我建议将这些更改为

div

s，以模仿您的

td

s正在做

td.scrollbox
{
垂直对齐：顶部；
}
td.scrollbox分区
{
背景：rgba（237,41,57,0.6）；
宽度：300px；
高度：250px；
边框：1px实心#ffffff；
溢出y：滚动；
位置：相对位置；
文本对齐：居中；
溢出：隐藏；
字体系列：“Poiret One”，草书；
}
td.滚动框：悬停div
{
高度：500px；
}

1.
2.
3.
4.

其他div正在下降，因为all.scrollbox的行为方式为表格单元格。 如果您想使用flexbox，另一个简单的解决方案如下。我已经编辑了您的代码以使用flexbox

 <div class="scroll-con">
  <div class="Scrollbox">1</div>
  <div class="Scrollbox">2</div>
  <div class="Scrollbox">3</div>
  <div class="Scrollbox">4</div>
</div>

.scroll-con {
  display: flex;
  flex-flow: row wrap;
}
.Scrollbox {
   background:rgba(237, 41, 57,0.6);

   border:1px solid #ffffff;
   overflow-y: scroll;
   width:300px;
   height:250px;
   transition: height 1s ease;
   overflow: hidden;
   text-align: center;

   font-family: 'Poiret One', cursive; 

 }

 .Scrollbox:hover {
    height:500px;
    overflow-y: hidden;
 }

1.
2.
3.
4.
.滚动控制{
显示器：flex；
柔性流：行换行；
}
.滚动框{
背景：rgba（237,41,57,0.6）；
边框：1px实心#ffffff；
溢出y：滚动；
宽度：300px；
高度：250px；
过渡：高度1秒；
溢出：隐藏；
文本对齐：居中；
字体系列：“Poiret One”，草书；
}
.滚动框：悬停{
高度：500px；
溢出y：隐藏；
}

其他div正在下降，因为all.scrollbox的行为方式为表格单元格。 如果您想使用flexbox，另一个简单的解决方案如下。我已经编辑了您的代码以使用flexbox

 <div class="scroll-con">
  <div class="Scrollbox">1</div>
  <div class="Scrollbox">2</div>
  <div class="Scrollbox">3</div>
  <div class="Scrollbox">4</div>
</div>

.scroll-con {
  display: flex;
  flex-flow: row wrap;
}
.Scrollbox {
   background:rgba(237, 41, 57,0.6);

   border:1px solid #ffffff;
   overflow-y: scroll;
   width:300px;
   height:250px;
   transition: height 1s ease;
   overflow: hidden;
   text-align: center;

   font-family: 'Poiret One', cursive; 

 }

 .Scrollbox:hover {
    height:500px;
    overflow-y: hidden;
 }

<