Html 使用悬停时以内联方式显示div

我正在使用html和css来显示一个彩色版本的徽标，当您将鼠标悬停在charcol版本的徽标上时

我希望徽标彼此并排显示，如：

x--x--x
x--x--x

但是，它们显示的是：

x
x
x

有人能帮忙吗？我相信一定很简单。V不熟悉CSS/HTML

HTML:

---

将以下内容添加到样式表中

.all-logos .logo {
    display: inline-block;
    margin: 0 10px; /* Only if you want space between elements */
}

---

我能够通过flex box属性实现您想要的功能

.all-logos {
  max-width: 30%;
  border: black 1px solid;
  display:flex;
  flex-direction:row;
}

---

这就是你想要的

.logo:hover>.charcol logo{
显示：无；
}
.logo:hover>.color徽标{
显示：内联块；
}
.彩色标志{
显示：无；
}
.所有标志{
宽度：30%；
边框：黑色1px实心；
}
.所有标识均为img{
最大宽度：100%；
}
.所有标识。标识{
显示：内联块；
}

---

没问题。很高兴我能帮忙。请您将此标记为答案，谢谢！

.all-logos .logo {
    display: inline-block;
    margin: 0 10px; /* Only if you want space between elements */
}

.all-logos {
  max-width: 30%;
  border: black 1px solid;
  display:flex;
  flex-direction:row;
}