jQuery CSS功能不適用於SVG圓元素

Question

HTML：

<div class="container">   
    <article class="caption">
        <svg class="grid-point" width="100" height="100" style="height: 120px; width: 625px;">
              <circle class="myPoint" cx="50" cy="50" r="5" fill="#80E1EE" />
            </svg>
        <img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
        <div class="caption__overlay">
            <h1 class="caption__overlay__title">Alaska</h1>
            <p class="caption__overlay__content">
                text
            </p>
        </div>
    </article>    
</div>

CSS：

body {
    font: normal 16px/1.5 Arial, sans-serif;
}

h1, p {
    margin: 0;
    padding: 0 0 .5em;
}

.container {
    margin: 0 auto;
    max-width: 480px;
}

.caption {
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

/* This works with css when i am hovering on caption class.
.caption:hover::before {
    background-color: rgba(0, 0, 0, .5);
}
*/

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.grid-point {
    position: absolute;
    z-index: 99999;
}

jQuery的：

$(document).ready(function() {
 $(".myPoint").hover(function() {
// I am trying here to do the same but with jQuery and when the circle is hovered and not the caption class
 $('.caption:hover::before').css("background-color": "rgba(0, 0, 0, .5)");  
}); 
});

下面是我的CSS代碼，當文章標題類懸停在文章標題類上時，我已經注釋了幾行CSS行。 我現在想用jQuery做同樣的事情，但是如果svg圈懸停了，那么文章必須覆蓋，而不是文章標題類，但是我的css函數不起作用。 我應該怎么做才能保存結果？

演示： http ： //jsfiddle.net/mek71rry/

Answer 1

為什么不嘗試使用jQuery這樣的添加類

$(".myPoint").addClass('caption');

和這個CSS代碼

.caption:hover::before{ background-color: rgba(0,0,0,.5);}

Answer 2

嘗試將其附加到head 。

使用jQuery

$('head').append('<style>.caption:hover::before{background-color: "rgba(0, 0, 0, .5)"; }</style>');

使用CSS

.caption:hover::before { background-color: rgba(0, 0, 0, .5); }

Answer 3

我不確定，但嘗試以下jquery解決方案，以替換：

$('.caption:hover::before').css("background-color": "rgba(0, 0, 0, .5)");  

由：

$('.caption').hover(function(){
     $(this).prev().css("background-color": "rgba(0, 0, 0, .5)");
});

希望這可以幫助。