Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to get rid of the circle that appears when hovering over the tab close button?

Considering that I already have (and mean to keep) this:
.tab-close-button {
display:none !important;
}

tab:hover .tab-close-button {
display:block!important;
}

Somehow the following doesn't work:
.tab-close-button:hover
{display:none!important}

The following sort of works but not quite stably - when you move the cursor over the tab close button sometimes it disappears sometimes not:
.tab-close-button.close-icon:hover
{display:none!important}

I use {display:none!important} here for targeting purposes, Ultimately I want to get rid of the circle and maybe change the color of the cross (on hovering).

Comments

  • /*AGENT_SHEET*/

    .tab-close-button {
    display:none !important;
    }

    .tabbrowser-tab:hover .tab-close-button {
    display:block !important;
    }

    .tab-close-button.close-icon {
    -moz-image-region: rect(0, 20px, 20px, 0) !important;
    }
  • Great, thank you! Works without /*AGENT_SHEET*/.
    As far as I understand Firefox uses a default sequence of images and you simply forbid using anything but the first image in any situation, hover or no hover. But what if I wanted to substitute my own image on hover? Why is hover so difficult to target here? Is it in conflict with tab:hover (because you can't hover over the tab close button without hovering over its tab)?
  • You can use:
    .tab-close-button.close-icon {
    list-style-image: url("[image url]") !important;
    }
    Hover over tab close button without hovering over tab:
    .tabbrowser-tab .tab-background-middle {pointer-events: none !important;
    }
  • The second one defeats my tab:hover .tab-close-button {display:block!important;
    } - in fact it makes tab browsing by mouse very difficult.
    The first one is replacing the image when hovering over tab (or when not hovering at all).

    But I need to replace the image when hovering over the tab close button (and still display the default image when hovering over tab while displaying no image when not hovering over tab and over tab close button).
    In other words: I need to keep my code above working and still replace the tab close button image but only when hovering over it (not over tab).
  • Try this:
    .tab-close-button:hover {
    list-style-image: url("[image url]") !important; -moz-image-region: initial !important;
    }
  • That did it! Thanks a lot, João.!
  • You're welcome.
Sign In or Register to comment.