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 add class

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

和这个CSS代码

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

Answer 2

我不确定但是请尝试以下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)");
});

希望这有帮助。

jQuery css函数不适用于svg circle元素

2 个答案: