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對圖像和懸停時的標籤有影響

回答

相關問題