在將鼠標懸停在不同的元素

使用jQuery，更改SVG顏色我有一個鏈接，看起來像這樣：在將鼠標懸停在不同的元素

頂部是一個SVG和底部是一個錨鏈接。由於您無法在CSS中定位父母，因此當我將鼠標懸停在下面的鏈接上時，我正在嘗試更改svg的顏色。我試圖用jQuery做到這一點，但還沒有運氣，希望你們可以幫忙。我需要去DOM，然後走另一條小路。

我試過。對（「鼠標懸停」，功能....我嘗試了.hover（）

我也試圖與一個錨鏈接周圍的一切，但我猜你不能在瀏覽器會立即關閉鏈接

我也嘗試添加一個CSS類到svg，使用相同的CSS使用：懸停，但是即使我看到「填充」值在檢查時改變，顏色只是沒有。

HTML

<div class="tag-container test-container"> 
    <div class="top clearfix"> 
    <!--?xml version="1.0" encoding="UTF-8" standalone="no"?--> 
    <svg width="41px" height="48px" viewBox="0 0 41 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> 
    <title style="fill: rgb(147, 147, 147);">filter-icn-bedbug</title> 
    <desc style="fill: rgb(147, 147, 147);">Created with Sketch.</desc> 
    <defs style="fill: rgb(147, 147, 147);"></defs> 
    <g id="Pest-Peeve-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="fill: rgb(147, 147, 147);"> 
     <g id="Shopfront" transform="translate(-402.000000, -706.000000)" fill="#C8C8C8"> 
      <g id="filter-icn-pest" transform="translate(154.000000, 698.000000)"> 
       <path d="M284.00492,32.6228518 L280.670988,31.5488791 C280.795828,31.9789813 280.909553,32.4236196 281.008742,32.8870696 L284.00492,32.9871132....a lot of code..... 278.646173,11.2639638 278.483709,11.2639638 C278.230607,11.2639638 277.980925,11.1459636 277.822737,10.9244995 L277.822737,10.9244995 Z" id="filter-icn-bedbug"></path> 
      </g> 
     </g> 
    </g> 
</svg> 
</div> 
    <div class="bottom"> 
     <a title="Show products matching tag Bedbugs" href="/collections/all/bedbugs">Bedbugs</a> 
    </div> 
</div>

CSS（SASS）

.blue-hover { 
    path {fill: $PPblue;} 
}

的JavaScript

$(document).ready(function() { 
    $(".test-container a").on('mouseover', function() { 
     $(this).closest('.tag-container').find('svg').children().css({'fill': '#0BACFF'}); 
    }); 
    $(".test-container a").on('mouseleave', function() { 
     $(this).closest('.tag-container').find('svg').children().css({'fill': '#939393'}); 
    }); 
});

得到一些幫助後，這是最後的工作

$(document).on({ 
    mouseenter: function() { 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 
    }, 
    mouseleave: function() { 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
    } 
}, ".test-container a");

來源

2016-09-16 Kevmon

也許更好的選擇是讓'a'標籤包裝'svg'和'div.bottom'，這樣圖像和文本鏈接起來，你可以使用CSS來設計風格。 – Duopixel

這就是我第一次嘗試的，但它不起作用。如果鏈接中還有其他鏈接，瀏覽器將不會以這種方式呈現它。 [鏈接] http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct [鏈接] – Kevmon

只需刪除內部標籤，如果瀏覽器支持'svg '它也支持html5（允許你嵌套塊元素）。 – Duopixel

試試這個..

$(document).on({ 
    mouseenter: function() { 
     //change color on mouse enter 
    }, 
    mouseleave: function() { 
     //change color on mouse leave 
    } 
}, ".test-container a");

來源

2016-09-16 05:27:59 sharad

謝謝！我在最後用答案更新了我的帖子。你知道爲什麼這種方式有效，其他方式不行嗎？ – Kevmon

在將鼠標懸停在不同的元素

回答

相關問題