Question

我有一个页面，我希望当我徘徊在某个标签上方以在某些图像中放大效果并更改该标签的颜色时，我正在做这种缩放效果当我将鼠标悬停在图像上方时，我现在想要在图像上执行该效果，并且当我将鼠标悬停在标签或图像上方时，也会更改标签的颜色。我不确定如何选择图像，因为图像不是相应标签的父级甚至兄弟...

我展示的图片更具描述性：当我将鼠标悬停在Sky标签或plane image上方时，我希望该标签更改颜色，并且我希望对plane img进行缩放。与其他元素一样：Planet与Earth planet image等...

这是我的代码：

<div style="height:400px; width:600px" class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">

            <img src="~/images/aviation.png" width="80" height="80" class="jumper" />

        </div>
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">
            <img src="~/images/international.png" width="80" height="80" class="jumper" />
        </div>
        <div class="row" style="margin-left:1em">
            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Sky</label>

            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Planet</label>
        </div>

        <div class="col-xs-4 col-xs-offset-2" style="height:100px">

            <img src="~/images/longshore3.gif" width="80" height="80" class="jumper" />

        </div>
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">
            <img src="~/images/marine.png" width="80" height="80" class="jumper" />
        </div>
        <div class="row" style="margin-left:1em">
            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Warehouse</label>

            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Ocean</label>
        </div>
    </div>
</div>

我知道使用ID我可以这样做但是如果没有id，我会有很多页面可以做到这一点吗？

Answer 1

它有点笨拙，但您可以通过为img和label元素分配相应的ID来实现。

例如，调用图片img1，img2等以及标签l1或label1等。然后当图片悬停时，请拨打电话抓取相应标签并改变其颜色的功能。您可以使用.slice()获取相应的ID，如下所示：

labelID = "label" + imgID.slice(3);

这将从图像ID中获取数字并提供正确的标签ID。然后，只需更改该标签ID的颜色。

Answer 2

这是您使用CSS可以做的最好的事情，但它包括重新格式化您的初始HTML代码。这是开始：

HTML：

<div style="height:400px; width:600px" class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-2">
                <label class="col-xs-4 col-xs-offset-2">Sky</label>   
            </div>
            <div class="col-xs-4 col-xs-offset-2">
              <img src="~/images/aviation.png" width="80" height="80" class="jumper" />
            </div>
            <div class="col-xs-4 col-xs-offset-2">
                <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Planet</label>
            </div>
            <div class="col-xs-4 col-xs-offset-2">
              <img src="~/images/international.png" width="80" height="80" class="jumper" />
            </div>
      <div>
</div>

CSS：

.container > div > div:first-child:hover + div {
    transform: scale(1.5);
}
.container > div > div:nth-child(3):hover + div {
    transform: scale(1.5);
}

从那里你可以从CSS和Bootstrap类开始。现在，我知道这是一个糟糕的解决方案，它只针对div，但这是你可以用相邻选择器做的最多。我也可以发布简单的JavaScript和/或jQuery解决方案......

现在，您可以通过alt和src获取元素，alt应该是唯一的。 src已经是：

img[src=""] 
img[alt=""]

悬停时JQuery对图像和标签的影响

2 个答案: