Question

我想创建一些盒装内容，以便在悬停时显示备用内容。我从其他问题中找到了一些例子，并尝试将它们用于我想要的东西，但没有太多运气。

我想要实现的完美示例是http://www.copyblogger.com/上“构建更智能的WordPress网站”（正下方）下的3个悬停按钮。

我假设静态包括图标/图像＆amp;下面的文字，悬停状态包括图标/图像，描述性文字和超链接按钮。

这正是我想要重现的东西。有谁可以提供一个这样的例子，以便我能理解我需要做什么？

感谢。

编辑：我理解Copyblogger使用的代码，我可以通过“Inspect Element”检索到的内容。我不打算使用他们的代码 - 因为我找不到所有的连接命令，但是它的行为方式相同。

Answer 1

显示在您发送的链接中的代码示例

    <li class="design">
          <div class="icon">Design</div>
         <a href="http://www.studiopress.com/get-started" target="_blank"                class="info"><p>The Genesis design framework, support and dozens of stunning themes.</p><div class="btn-primary-small">Find Out More</div></a>
    </li>

css将是

li.design a{
 display:none;
}
li.design:hover a{
  display:block;
}

Answer 2

Here is a fiddle。有3或4种方法可以做到这一点，但你只是希望有人为你做这件事，所以我不会涉及这些细节。我先把它写成移动设备并假设你可以使用box-sizing: border-box; - 所以如果你不能这样做 - 那么你只需添加适当的宽度就可以了。你好了。

HTML

<a href="#" class="block-icon">

    <div class="block top-stuff">
        <div class="text-w">
            Top stuff
        </div>
    </div>

    <div class="block under-stuff">
        <div class="text-w">
            <h4>Under stuff</h4>
            <p>Some paragraph</p>
            <div class="button">Call to action</div>
        </div>
    </div>

</a>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

.block-icon {
    position: relative;
    display: block;
    width: 100%;
    float: left;
    border: 1px solid red;
    text-align: center;
    height: 10em;
    margin-bottom: 1em;
}

.block-icon .block {
    height: 100%;
    padding: .5em;
}

.block-icon .text-w {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid blue;
}

.block-icon .text-w:after {
    content: "\0020";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    /* this creates a second element so that they can align vertical middle to one another */
}

.top-stuff {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    opacity: 1;
    transition: opacity .5s linear;
}

.under-stuff {
    background-color: #eee;
}

a:hover .top-stuff {
    opacity: 0;
    transition: opacity .1s linear;
}

.button {
    width: auto;
    border: 1px solid black;
}


@media (min-width: 500px) {

    .block-icon {
        width: 32%;
        margin-right: 2%;
    }

    .block-icon:nth-of-type(3) {
        margin-right: 0;
    }

} /* end break-point */

CSS显示悬停HTML内容

2 个答案:

HTML

CSS