Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] checkbox flickers on hover (z-index)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #169455
    grimski
    Participant

    Hi there,

    I have this problem where hovering over the checkbox results in it flickering. I use LESS to build my websites so I’ve just grabbed the compiled CSS – so there might be a bit of it. I am testing this issue in Chrome (MAC).

    http://cdpn.io/Lbkgu

    But basically I have a list of products, each of which has a checkbox. When checking the checkbox, a div appears over the checkbox which contains a button. The idea behind this is that when a few items are selected, you can click the button which takes you to a comparison page. When the ‘compare’ div appears (which is located below the product list), I use z-index to show the checkbox through the div so it can be unchecked if necessary – which is causing problems! I.E. The flickering of the checkbox when hovering over it.

    I was wondering is there a way to fix this issue? The only solution I’ve come up with is to display a checked input background image on the compare div so it looks as if its active, which wouldn’t be ideal.

    Its worth noting that the javascript is taken from an old project my company did and its not great. For example the compare div shows, it sets an absolute position with a top value based on the wrapper div (the form), so when the screen scales, vertically the buttons are misaligned. But I don’t think the problem I’m getting has anything to do with the javascript.

    Thanks, I hope someone can shed some light on this!
    Steve

    #174252
    MDMueller
    Participant

    The whole html/css-structure seems a bit messy imo. Not sure if this works, but maybe you could do it the other way round – not increasing the z-index from the hovered li, but decreasing the z-index from the subsequent element:

    .product-list li:hover,
    .product-grid li:hover {
    z-index: initial; //alternatively remove the z-index 10 that is given
    }

    .product-list li:hover+li,
    .product-grid li:hover+li {
    z-index: -1;
    }

    #174346
    MDMueller
    Participant

    The fastest solution is probably to include the #compare-tag in every list element. Then u don’t have to mess with all the different z-indexes.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.