CSS Click Events

Question

So I found a fiddle example using :hover as a selector to hide a div tag until something is moused over a selected area. I have been doing some research but to no avail, how would I change :hover to something that would be more of a "onclick"

http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML

<div id="button"><h3>button</h3>
    <div id="two">Hovered content</div>
</div>

CSS

#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    width:98px;
    height: 0;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease;
}
#button:hover > #two {
    display:block;
    left:0px;
    height:100px;
}

Ry- · Accepted Answer · 2014-05-08 18:42:33Z

7

:active means “while this element is activated”. One condition for that is a mouse click, but it’s generally while the mouse button is depressed; it’s not persistent.

If you need persistence, you’ll be able to use a <details> element eventually; in the meantime, a hidden checkbox combined with a <label> and a selector along the lines of :checked + .something is common. You might consider just using JavaScript at that point, too.

Remember to respect keyboard focus, by the way.

answered May 8, 2014 at 18:42

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Crozier · Accepted Answer · 2014-05-08 19:05:10Z

The checkbox approach minitech mentioned would look like this:

Example Here

HTML

<div id="button">
    <label for="toggle">
        <h3>button</h3>
    </label>
    <input id="toggle" type="checkbox"/>
    <div id="two">Content</div>
</div>

Modified CSS

[type="checkbox"]:checked + #two {
    display:block;
    left:0px;
    height:100px;
}
[type="checkbox"] {
    display:none;
}

As a side note, i'm not sure whether it is correct for a label element to wrap a h3 element. A span element would probably be a better fit.

JavaScript approach (example):

var button = document.getElementById('button');
button.querySelector('h3').addEventListener('click',function(){
    button.classList.toggle('open');
});

CSS

#button.open #two {
    display:block;
    left:0px;
    height:100px;
}

This method's support can be found here.

abbotto · Accepted Answer · 2014-05-08 18:53:08Z

0

You can find several examples of how to do this here.

The author goes over 4 methods:

 Checkbox hack
:target way
:focus way
Transition hack

DEMO

answered May 8, 2014 at 18:53

abbotto

4,3592 gold badges24 silver badges20 bronze badges

Comments

sheriffderek · Accepted Answer · 2014-05-08 18:54:44Z

0

Sounds to me like it's time for you to learn a little jQuery (javascript)

Checkbox is cool for sure - but still problematic in certain cases as of this post.

an .on('click', function({ // do stuff }); Is the way to go.

// don't forget to include jQuery

$('.your-element').on('click', function() {
    $('.your-other-element').toggleClass('your-special-class'); 
});

Here is a jsFiddle with a full example to help explain the basics.

answered May 8, 2014 at 18:54

sheriffderek

9,0736 gold badges46 silver badges70 bronze badges

Comments

The4thIceman · Accepted Answer · 2014-05-08 18:58:20Z

0

Another possibility is to use toggle()

$("#button").mouseup( function () {
    $("#two").toggle();
})

jquery toggle() will switch between display:none and showing it. So instead of switching classes, you can toggle an other div

answered May 8, 2014 at 18:58

The4thIceman

3,8993 gold badges31 silver badges38 bronze badges

Collectives™ on Stack Overflow

CSS Click Events

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related