tags:

views:

108

answers:

2

Am having an issue in opera. I have a series on hyperlinnks in a ul li with backgorund images applied. The pointer cursor isnt displaying when I hover over the links.

Is this a know bug, code below

  • /cricket" title="Cricket" id="cricket-link" style="background-image:url(/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg);" onmouseover="$().hoverSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bghover.jpg', 'cricket'); return false;" onmouseout="$().originalSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg', 'cricket'); return false;">Cricket
  • #sidebar ul {
    margin: 0;
    padding: 0 0 27px 16px;
    display: block;
    float: left;
    width: 180px;
    }
    
    #sidebar ul li {
    background-image: url(images/left-nav-bg.jpg);
    background-repeat: no-repeat;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    display: block;
    float: left;
    width: 180px;
    height: 40px;
    list-style-type: none;
    cursor:pointer !important;
    }
    
    
    #sidebar ul li a {
    background-repeat: no-repeat;
    background-position: 2px 2px;
    margin: 0;
    padding: 8px 8px 0 4px;
    display: block;
    float: left;
    width: 168px;
    height: 32px;
    color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    cursor:pointer !important;
    } 
    
    A: 

    you should use hover stage for this id

    #sidebar ul li hover{
    background-repeat: no-repeat;
    background-position: 2px 2px;
    margin: 0;
    display: block;
    float: left;
    width: 168px;
    height: 32px;
    color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    cursor:pointer !important;
    }
    

    add this css in your style.

    kc rajput
    That did not solve this issue sadly. I have discovered that the cursor displays if I remove the JQuery code, why would this break it?Many Thanks
    A: 

    Issue solved, changed mouseover and mouseout events to be return true;

    If you're curious about why this works, I think I can shed a bit of light: What those mouseover and mouseout events are returning is whether or not the event should bubble up to their parent element. So it looks like for whatever reason, Opera doesn't update the cursor unless the event bubbles, and since jQuery was set to return false in its event handlers, that bubbling never occurred.
    Dan M