jQuery css function doesn't work on svg circle element

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)");  
}); 
});

Below is my css code, i have commented a few css lines that are working when the article caption class is hovered, the article caption class gets an overlay. I want now with jQuery make the same thing but now the article must get the overlay if the svg circle is hovered and not the article caption class, but my css function doesn't work. What should i do to archieve the result?

Demo: http://jsfiddle.net/mek71rry/

But i must use :before pseudo-element, is there an alternative way with jQuery? — Alanas Macijauskas, Sep 19 '15 at 15:23
Why not to define `.caption:hover::before { background-color: rgba(0, 0, 0, .5); }` rule in CSS ? — c-smile, Sep 19 '15 at 15:26
See differents answers in [this POST](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin). — lmgonzalves, Sep 19 '15 at 15:27

score 1 · Accepted Answer · answered Sep 22 '15 at 01:02

1

why you don't try using jQuery add class like this

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

and this CSS code

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

answered Sep 22 '15 at 01:02

Agung Trilaksono

81
5

score 0 · Answer 2 · answered Sep 19 '15 at 15:27

0

Try to append it to head.

Using Jquery

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

using Css

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

answered Sep 19 '15 at 15:27

Shrinivas Pai

7,491
4
29
56

This is not want i want to do, i need to apply the overlay when the svg circle is hovered. – Alanas Macijauskas Sep 19 '15 at 15:38

score 0 · Answer 3 · answered Sep 19 '15 at 15:32

0

I'm not sure but try the following jquery solution, replacing :

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

By :

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

Hope this helps.

answered Sep 19 '15 at 15:32

Zakaria Acharki

66,747
15
75
101

This doesn't also work and i want to reach a different result with jQuery(when the svg circle is hovered, not the article caption class like in your example) – Alanas Macijauskas Sep 19 '15 at 15:49
But from your example i have tryed this: `$(".myPoint").hover(function() { $('.caption').prev().css("background-color": "rgba(0, 0, 0, .5)"); }); ` but it also don't work – Alanas Macijauskas Sep 19 '15 at 16:01

jQuery css function doesn't work on svg circle element

3 Answers3