html - Wordpress 中的悬停按钮

Question

我正在尝试在 Wordpress 页面中创建悬停按钮。我不想使用 jquery 或 javascript，只是使用 CSS。

我能够创建 1 个按钮，但是当尝试将多个按钮与悬停文本框并排放置时，它似乎不起作用。这是我正在尝试的代码:

CSS

/* cat button and content */
.cat_content {
    display: none;
    padding-top: 50px;
}
.cat_trigger:hover .cat_content {
    display: inline-block;
    position: relative;
}
.cat_trigger:hover .ok {
display: inline-block;
}

/* dog button and content */
.dog_content {
    display: none;
    padding-top: 50px;
}
.dog_trigger:hover .dog_content {
    display: inline-block;
    position: relative;
}
.dog_trigger:hover .ok {
display: inline-block;
}

/* mouse button and content */
.mouse_content {
    display: none;
    padding-top: 50px;
}
.mouse_trigger:hover .mouse_content {
    display: inline-block;
    position: relative;
}
.mouse_trigger:hover .ok {
display: inline-block;
}

HTML

<!-- Cat Button -->
<div class="cat_trigger">
  <button>Cat</button>
  <div class="cat_content">Meow</div>
</div>

<!-- Dog Button -->
<div class="dog_trigger">
  <button>dog</button>
  <div class="dog_content">Woof</div>
</div>

<!-- Mouse Button -->
<div class="mouse_trigger">
  <button>mouse</button>
  <div class="mouse_content">Eee</div>
</div>

我无法并排对齐按钮并在下方的同一位置显示一个文本框。谁能想到如何做到这一点？或者更简单的方法？

Answer 1

据我了解，这就是您所需要的

HTML

<!-- Cat Button -->
<div class="hover"><button>Cat</button>
<div class="show">Meow</div>
</div>

<!-- Dog Button -->
<div class="hover"><button>dog</button>
<div class="show">Woof</div>
</div>

<!-- Mouse Button -->
<div class="hover"><button>mouse</button>
<div class="show">Eee</div>
</div>

CSS

.hover {
  display: inline-block;
  position: relative;
}
.show {
  position: absolute;
  display: none;
}
.hover:hover > .show {
  display: block;
}

fiddle -> https://jsfiddle.net/nhew8hxc/