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;
}

小提琴 - ＆gt; https://jsfiddle.net/nhew8hxc/

Wordpress中的悬停按钮

1 个答案: