Question

我对某些设计有疑问。我希望div只能在图标鼠标悬停时显示，我已完成此操作，但div中的内容部分未包含在div中。

为了准确地展示它是怎样的，这是当前事物的图片：

http://img4.hostingpics.net/pics/878048issuePicture.jpg

所以div是箭头指向下方的浅橙色矩形，但它应该包含图标和右边的文本（（？）REQ和另外2个）。这些项目与div同时显示（鼠标悬停在箭头上），但它们不包含在div中。

这些部分的代码：

HTML：

<table class="table-center table" style="background-color:#FFFCF9">
            <thead>
               ...
            </thead>
            <tbody>
            <tr class="changeRequestSearch">
                <td>
                    <img src="/assets/css/images/unroll-icon.png" ng-mouseenter="showSelectType()" />
                    <div class="selectType" id="selectType" ng-mouseleave="hideSelectType()">
                        <div class="nowrap">
                            <input type="checkbox" ng-click="filterType()" id="filterReq" value="req" checked/> <img src="/assets/css/images/request-icon.png" /> REQ
                        </div>
                        <div class="nowrap">
                            <input type="checkbox" ng-click="filterType()" id="filterEvol" value="evol" checked/> <img src="/assets/css/images/evolution-icon.png" /> EVOL
                        </div>
                        <div class="nowrap">
                            <input type="checkbox" ng-click="filterType()" id="filterBug" value="bug" checked/> <img src="/assets/css/images/bug-icon.png" /> BUG
                        </div>
                    </div>
                </td>
                ...

CSS ：

.trHover:hover {
background-color:#f5f5f5;}

.nowrap {
    white-space:nowrap;
}

.clear {
    clear: both;
}

.changeRequestSearch td input {
    width:100%;
}

.selectType {
    visibility:hidden;
    position:fixed;
    background-color:#F5EBDE;
}

这是一个 JSFiddle 链接，但在这里确实有用（我做了一些更改）：http://jsfiddle.net/D2RLR/6200/

Answer 1

尝试设置潜水的宽度，如

.selectType {
 width: 100px;
}

部分文本未包含在div中

1 个答案: