Question

我有几个<div>显示为代表某个公司的方框。当它们出现在页面上时，它们看起来像这样：

当用户将鼠标悬停在方框上时，它应显示下面两个方框，这些方框指向＆＃34;产品信息＆＃34;或＆＃34;联系信息＆＃34;。如果用户将鼠标移动到主盒子外面或刚刚显示的2个盒子，这些盒子可以与之交互并且应该消失。见下文：

如何制作这些＆＃34;信息提示＆＃34; div显示在box:hover上？是否可以创建一个＆＃34; CSS规则＆＃34;各种各样的，当我将鼠标悬停在这些显示的主框上时？

如果可能，我真的很想在没有JavaScript的情况下这样做。

编辑：如果没有额外的提示，则应缩短盒子高度，以便底部没有明显的额外空白区域（通常情况下）

FIDDLE： http://jsfiddle.net/q8csa10v/3/

HTML：

<div class="catalog-display">

            <div class="catalog-item">
                <div class="item-title">&#9825;</div>
                <img class="supplier-logo" src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" alt="<supplier name> logo" />
                <div class="supplier-name">Ubuntu Office Supply</div>
                <div class="supplier-info">
                    <span>Product Info</span>
                    <span>Contact Info</span>
                </div>
            </div>

            <div class="catalog-item">
                <div class="item-title">&#9825;</div>
                <img class="supplier-logo" src="http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png" alt="<supplier name> logo" />
                <div class="supplier-name">Silvercreek Products</div>
                <div class="supplier-info">
                    <span>Product Info</span>
                    <span>Contact Info</span>
                </div>
            </div>
</div>

CSS：

.catalog-display {
    padding: 20px 0;
}

.catalog-item {
    width: 150px;
    height: 215px;
    background-color: white;
    text-align: center;
    border: 1px solid #3fa9db;

    display: inline-block;
    vertical-align: middle;

    position: relative;
}

    .catalog-item .item-title {
        background-color: #656262;
        width: 100%;
        height: 25px;
        text-align: right;
    }

    .catalog-item .supplier-logo {
        height: 80px;
        margin: 5px 0;
    }

    .catalog-item .supplier-name {
        color: #0E80B4;
        font-weight: bold;
        cursor: pointer;
        padding: 5px 5px 0 5px;
        border-top: 1px solid #656262;
    }

    .catalog-item .supplier-info {
        color: #656262;
        font-weight: bold;

        bottom: 0;
        position: absolute;

        border-top: 1px solid #656262;
    }

        .catalog-item .supplier-info span {
            display: inline-block;
            height: 46px;
            width: 73px;
            cursor: pointer;
            background-color: transparent;
        }
            .catalog-item .supplier-info span:first-child {
                background-color: #d1e8f0;
            }

            .catalog-item .supplier-info span:last-child {
                background-color: #E5EDD6;
            }

Answer 1

将盒子的初始高度设置为175px并设置为:hover全高

.catalog-item {
    width: 150px;
    height: 175px;
    background-color: white;
    text-align: center;
    border: 1px solid #3fa9db;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: height .4s;
}
.catalog-item:hover{
    height:215px;
}

CSS for .supplier-info

.catalog-item .supplier-info {
    color: #656262;
    font-weight: bold;
    bottom: 0;
    position: absolute;
    border-top: 1px solid #656262;
    display:none;
}
.catalog-item:hover > div.supplier-info{
    display: block;
}

修改要获得更流畅的效果（使用不透明度 - 请看一下 Fiddle ）

<强> Fiddle

Answer 2

只需将此添加到您的css：

.supplier-info  {
    visibility:hidden;
}

.catalog-item:hover .supplier-info  {
    visibility:visible;
}

以下是上述代码：http://jsfiddle.net/AndrewL32/q8csa10v/4/

<强> - 编辑 -

要删除div下面的额外空格，您可以：

1）删除catalog-item的当前边框属性，并将其高度更改为215px;

2）将图片包裹在.item-img div中并为其添加边框。

3）也可以在第三个框中添加边框。

4）从产品信息 div中移除bottom:0并为该div添加边框。

这是一个更新的jsfiddle：http://jsfiddle.net/AndrewL32/q8csa10v/13/

如何使用CSS：悬停以显示额外的div块元素？

2 个答案: