Question

我正在使用html＆amp;当您将鼠标悬停在徽标的charcol版本上时，css将显示徽标的颜色版本。

我希望徽标内联显示，如：

X - X - X
X - X - X

但它们显示如下：

X
X
X

任何人都可以提供帮助 - 我确信它一定很简单。 V缺乏CSS / HTML经验。

HTML：

<div class="all-logos">
  <div class="logo">
    <div class="charcol-logo"><img src=grey2.png></div>
    <div class="color-logo">
      <a href=http://www.bbc.co.uk><img src=color2.png></a>
    </div>
  </div>
  <div class="logo">
    <div class="charcol-logo"><img src=grey1.png></div>
     <div class="color-logo">
      <a href=http://www.bbc.co.uk><img src=red1.png></a>
    </div>
  </div>
</div>

CSS：

.logo:hover>.charcol-logo {
  display: none;
}

.logo:hover>.color-logo {
  display: inline-block;
}

.color-logo {
  display: none;
}

.all-logos {
  width: 30%;
  border: black 1px solid;
}

.all-logos img {
  max-width: 100%
}

Answer 1

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

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

Answer 2

我能够通过flex-box属性实现您正在寻找的东西。

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

Answer 3

这样的东西是你想要的吗？

.logo:hover>.charcol-logo {
  display: none;
}

.logo:hover>.color-logo {
  display: inline-block;
}

.color-logo {
  display: none;
}

.all-logos {
  width: 30%;
  border: black 1px solid;
}

.all-logos img {
  max-width:100%;
}

.all-logos .logo {
  display: inline-block;
}

<div class="all-logos">
  <div class="logo">
    <div class="charcol-logo"><img src="http://placehold.it/50x50"></div>
    <div class="color-logo">
      <a href="http://www.bbc.co.uk"><img src="https://dummyimage.com/50x50/000/fff"></a>
    </div>
  </div>
  <div class="logo">
    <div class="charcol-logo"><img src="http://placehold.it/50x50"></div>
    <div class="color-logo">
      <a href="http://www.bbc.co.uk"><img src="https://dummyimage.com/50x50/000/fff"></a>
    </div>
  </div>
</div>

使用悬停时显示div内联

3 个答案: