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

我有一个页面，我希望当我悬停在特定标签上方以在特定图像中放大效果并更改该标签的颜色时，我正在做在将图像悬停在图像上时，已经具有放大效果，但是现在我希望在图像上实现该效果，并在标签或图像上方悬停时更改标签的颜色。我不知道如何，因为图像不是父母甚至对应标签的兄弟选择图像...JQuery对图像和悬停时的标签有影响

我展示图片更具描述：当我徘徊在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>

我知道，使用IDS，我可以这样做，但我想有很多网页应没有ID可以做到这一点？

来源

2016-10-12 AlexGH

你为什么不用CSS来做这件事？ – stormec56

@ stormec56我打开的建议让我知道:)我有更多的经验与JQuery比用CSS，但我很想学习如何达到这个使用CSS – AlexGH

这我帮你http://tympanus.net/Tutorials/CaptionHoverEffects/ – NaveenDA

这是您可以用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和自举类开始。现在，我知道这是一个不好的解决方案，它只针对div，但这是您可以对相邻选择器执行的最多操作。我还可以发布简单的JavaScript和/或jQuery解决方案...

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

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

来源

2016-10-12 14:34:15 stormec56

这是一种笨重的，但你可以通过将相应的ID分配给img和label元素来完成。

例如，调用图像img1，img2等，并且标签l1或label1等，然后当图像悬停，调用抓住相应的标签和改变其颜色的功能。你可以使用.slice()得到相应的ID，像这样：

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

这将抓住从图像ID的数量，并拿出正确的标签ID。然后，只需更改该标签ID的颜色。

来源

2016-10-12 13:28:16 freginold

我知道这个解决方案，但如果可能的话，我想这样做没有ID，所以它可以更易读 – AlexGH

你也可以通过将'label'' innerText'指定为'img' 'alt'文本，然后抓住标签。例如，如果'img1'悬停在上面，它的alt文本是'label1'，那么就像这样抓住它：'labelID = imgID.alt'来获取正确的标签。没有必要的ID。 – freginold

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

回答

相关问题