trying to get the css left hover property using jQuery

Question

im trying to get the left property using jQuery where the css is written as

#sldn_mnu li:hover ul ul {left:-6000;}

below is my alert which outputs (-7000) which is the left prop. of this style: #sldn_mnu ul ul {left:-7000;}. any ideas? thanks.

alert($('#sldn_mnu li').hover().find('ul ul').css('left'));

relavant html: im trying to talk to the secondary < ul> Items 1.1.1 dropdown.

<div id="sldn_mnu">
    <ul>
    <li><a href="#">HELLO</a></li>
    <li class="sldn_mnu-drop"><a href="#" ><span class="sldn_mnu-label">WORK</span></a>
        <ul>
          <li class="sldn_mnu-subDrop"><a href="#">Item 1.1</a>
            <ul>
              <li><a href="#" >Item 1.1.1</a></li>
              <li><a href="#" >Item 1.1.2</a></li>
            </ul>
          </li>
          <li><a href="#" >Item 1.2</a></li>
          <li><a href="#" >Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#" >Item 2</a>
        <ul>
          <li><a href="#" >Item 2.1</a></li>
          <li><a href="#" >Item 2.2</a></li>
          <li><a href="#" >Item 2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3</a></li>
    </ul>

You can't really get the css set on pseudo stuff like :hover like that. — adeneo, Nov 01 '12 at 10:54
i've modified my answer accordingly, however u better of using console.log instead of alert. — p1100i, Nov 01 '12 at 12:39
@adeneo not with jQuery functions, but with JavaScript you can. — jfrej, Nov 01 '12 at 13:10
@jfrej - nope, you really can't! Searching the stylesheets for a string is'nt really the same as using `element.style`, jQuery or not! — adeneo, Nov 01 '12 at 17:36
Ok, I never said it's the same :) You're right. But if you **really** need the content of a pseudo class you'll find it only within a stylesheet. — jfrej, Nov 01 '12 at 17:44

p1100i · Answer 1 · 2012-11-01T12:50:59.730

What you can do is to override the 'hover' event and do your things there for example:

JS:

$('#sldn_mnu li').bind('hover',function(e){
  //console.log($(this).find('ul ul').css('left'));
  alert($(this).find('ul ul').css('left'));
});

However it would be simpler for you adding a css class to the <ul> which you want to ask the left, then you could just write:

console.log($(this).find('ul.<your_ul_css_class>').css('left'));

Another simplifaction would be to add a css class to the <li> which you want to trigger the calculation, then all of this could be like:

$('li.<your_li_css_class>').bind('hover',function(e){
  console.log($(this).find('ul.<your_ul_css_class>').css('left'));
});

score 0 · Answer 2 · edited May 23 '17 at 12:27

If the CSS comes from a stylesheet (and pseudoclasses always do as you can't add them inline), you can't use pure jQuery to retrieve it.

Instead you need to look into the styleSheets objects in document.styleSheets.

The following code is adapted from this answer. It iterates over all stylesheets and looks for a matching CSS rule.

Working demo here.

function getStyle(selector) {
    for(var y=0;y<document.styleSheets.length;y++){
        var classes = document.styleSheets[y].rules || document.styleSheets[y].cssRules
        for(var x=0;x<classes.length;x++) {
            if(classes[x].selectorText.match(selector)) {
                    (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
            }
        }
    }
}

getStyle(/sldn_mnu.*hover/);

Please note, I adapted the function to use a regex match rather than a simple string comparison.

Instead of alerts you might want to return after the first match or perhaps return an array of all matches.

trying to get the css left hover property using jQuery

2 Answers2