Question

我在Angular中有一个组件，它将产品集合显示为四列网格中的图像。

\n

我希望能够将鼠标悬停在图片上并弹出，在其下方显示一个显示其他信息的标题区域。弹出工作正常，但它下面的标题不排队。这似乎与它的立场是绝对的事实有关。这些是应用于此效果的相关样式规则

<div class="row" ng-repeat="product in products track by $index" ng-if="$index % 4 == 0">
<div class="col-sm-3 title-box-sm" ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]" ng-if="products[i] != null" ng-class="{hover: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
    <a href="{{ products[i].url }}">
        <img alt="{{ products[i].alt }}" ng-src="{{ products[i].image_url }}"/>
        <div class="image-caption">
            {{ products[i].name }}
        </div>
    </a>
</div>

}

.title-box-sm.hover {
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-webkit-transform: scale(1.03);
transform: scale(1.03);
z-index: 600;

}

但它在右侧没有正确排列，并且添加到图像标题的任何填充都会将其推出。它需要是一个绝对的位置，以便在盘旋时它不会推动其他一切。无论我如何设置图像标题容器的样式，如何使标题始终与图像的左右对齐？对不起，如果已经回答，我找不到相关的文章。

Answer 1

可能是因为您的CSS设置为使标题100％宽度，而不是实际图像宽度。我删除了角色的东西，因为它不相关，并创造了一个快速的小提示，以显示我认为你在后。

固定宽度：https://jsfiddle.net/w3nc95dg/ 流体宽度：https://jsfiddle.net/w3nc95dg/4/

我做的CSS更改：

.title-box-sm:hover {
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-webkit-transform: scale(1.03);
transform: scale(1.03);
z-index: 600;
}

.title-box-sm .image-caption {
display: none;
position: absolute;
text-align:center;
background: #66ffff;
/*width: 100px;*/
left: 15px;
right: 15px;
line-height: 3.4em;
}

.title-box-sm:hover .image-caption {
display: block;
}

将图像标题区域与图像对齐

1 个答案: