0

I need to change dynamically the left property of a css class from a javascript function.

.mega-dropdown-menu:before {
    content: "";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: **attr(data-left px)**;
    z-index: 10;
}

function DropDownHover() {
    try {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("400");
                $(this).toggleClass('open');
                var objChevron = $(this).find(".fa-chevron-down");
                if (objChevron.length >0) {
                    var offset = $(this).find(".fa-chevron-down").offset();
                    var offsetBefore = offset.left - 273;
                    $('.mega-dropdown-menu').attr('data-left', offsetBefore);
                }
            },
            function () {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("400");
                $(this).toggleClass('open');
            }
        );
    } catch (err) { alert(err.message); }
}

During the execution i get number of pixel and the data-left is set to the div but the offset is not being applied to the left property.

Chrome inspector screenshot

I also tried attr(data-left number) and attr(data-left), all of them with the same result.

What am i missing?

aknet
  • 63
  • 6
  • 1
    here is your answer : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/49618941#49618941 (CSS variables) – Temani Afif Sep 06 '18 at 20:34

1 Answers1

0

Afaik you can use attr() syntax only for content property.

Why not go

$('.mega-dropdown-menu').css('left', offsetBefore+'px');

?

connexo
  • 53,704
  • 14
  • 91
  • 128