Triggering CSS :Active Selector for Non-Anchor Elements

Use jQuery to click an element while triggering css :active

Thank you for your help, i solved it exactly as proposed, a class similar to the :active selector is being attached on keydown and removed on keyup.

That way it feels very responsive and no timeouts interfere.

$( document ).keydown(function(event){
    if(event.keyCode == 81){
        $("#hud-button1").click().addClass('active');
    }
    });

    $( document ).keyup(function(event){
    if(event.keyCode == 81){
        $("#hud-button1").removeClass('active');
    }
    });
}

a with an inner span not triggering :active state in IE 8

Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.

CSS selector :active not working on child element click in IE8

You could use a background image instead of a real image.

html:

<div id="ctr__Wrapper" class="wrapper">
    <div id="ctr" class="control clickable">
    </div>
</div>

css:

.control
{
    border: 1px solid #000;
    background-color: #666;
    height: 40+height-of-logopx;
    background-image:url(logo.png); background-repeat:no-repeat;
    background-position:20px 20px;
}

.control:active
{
    background-color: #bbb;
}

How to play css transition effect from javascript

It seems you cannot use :active alone here since Javascript is unable to trigger that state. Instead additonally create a class .active and put it on the element.

.button.active:after { ... }

See Triggering CSS :active selector for non-anchor elements

Since it kind of touches the topic, the global accesskey attribute might be interesting for you as well.

Why does my :active selector lose its click event state on scale tranformation?

You can easily work around this

Make the content(button look) with another element in the button or anchor, and put the transform on the new element inside of the button. This way when you click the button, you get the transform and the js triggering since the actual button isn't shrinking

here is a simple example

document.getElementById('moreRecipes').addEventListener('click', function() {    alert("clicked");});

button.btn span {
    text-transform: uppercase;    border: solid 1px #282828;    font-size: 11px;    line-height: 17px;    display: block;}button.btn:active span {    transform: scale(.95);}

<button id="moreRecipes" class="btn">  <span>Show more recipes</span></button>

CSS Active link not working

I saw that there's an error here, as it should be :active and not .active, so replace:

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

With:

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

---

Else, if you are talking about each page having an active state, then what CSS you have written is correct. In your HTML, you need to add this:

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

Now, that particular link will be displayed in the active state. It has to be done for each page, if you are using HTML, or it can be done using programming if you are using something like PHP. So, the same thing in PHP would be:

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>

---

Related Topics