convert css code from :hover to click

Question

i have a problem : there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .

photo on this code:

<a class="textlink" href="#" style="padding:10px 0;">
    <img src="alert/images.gif" style="width: 21px;" />
    <span id="mes">$count</span>
</a>

the full code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<style type="text/css">
    a {
        text-decoration: none;
        color: #838383;
    }
    a:hover {
        color: black;
    }
    #menu {
        position: relative;
        margin-left: auto;
        top: -34px;
    }
    #menu ul {
        list-style-type: none;
    }
    #menu li {
        float: left;
        position: relative;
        text-align: center;
    }
    #menu ul.sub-menu {
        position: absolute;
        left: -10px;
        z-index: 90;
        display: none;
    }
    #menu ul.sub-menu li {
        text-align: right;
    }
    #menu li:hover ul.sub-menu {
        display: block;
    }
    .egg {
        padding: 10px;
        margin: 5px 5px 5px 5px;
        position: relative;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
        background-color: #fff;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid rgba(100, 100, 100, 0.4);
    }
    .egg_Body {
        border-top: 1px solid #D1D8E7;
        color: #808080;
    }
    .egg_Message {
        font-size: 13px !important;
        font-weight: normal;
        overflow: hidden;
    }
    h3 {
        font-size: 13px;
        color: #333;
        margin: 0;
        padding: 0;
    }
    .comment_ui {
        border-bottom: 1px solid #e5eaf1;
        clear: left;
        float: none;
        overflow: hidden;
        padding: 6px 4px 3px 6px;
        width: 331px;
        cursor: pointer;
        white-space: pre-line;
    }
    .comment_ui:hover {
        background-color: #F7F7F7;
    }
    .comment_actual_text img {
        margin: 0px 0px 0px 7px;
    }
    .dddd {
        background-color: #f2f2f2;
        border-bottom: 1px solid #e5eaf1;
        clear: left;
        float: none;
        overflow: hidden;
        margin-bottom: 2px;
        padding: 6px 4px 3px 6px;
        width: 331px;
    }
    .comment_text {
        border-radius: 2px 2px 2px 2px;
        padding: 2px 0 4px;
        color: #333333;
    }
    .comment_actual_text {
        display: inline;
        padding-left: .4em;
    }
    ol {
        list-style: none;
        margin: 0 auto;
        width: 500px;
        margin-top: 20px;
    }
    #mes {
        padding: 0px 3px;
        border-radius: 3px 3px 3px 3px;
        background-color: rgb(240, 61, 37);
        background-color: #FF00CC;
        font-size: 9px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 5px;
        left: 73px;
    }
    .toppointer {
        background-image: url(alert/top.png);
        background-position: -82px 0;
        background-repeat: no-repeat;
        height: 11px;
        position: absolute;
        top: -11px;
        width: 20px;
        right: 276px;
    }
    .clean {
        display: none
    }
    .textlink {
        display: block;
        width: 140px;
    }
</style>

<span id="menu">
    <ul>
        <li>
            <a class="textlink" href="#" style="padding:10px 0;">
                <img src="alert/images.png" style="width: 21px;" />
                <span id="mes">$count</span>
            </a>
            <ul class="sub-menu">
                <li class="egg">
                    <div class="toppointer">
                        <img src="alert/top.png" />
                    </div>
                    <div id="view_comments"></div>
                    $all
                    <if condition="$count_all > 0 ">
                        <div class="bbbbbbb" id="view">
                            <div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
                                <a href="misc.php?do=delalert" class="view_comments" id="">view all</a>
                            </div>
                        </div>
                    </if>
                </li>
            </ul>
        </li>
    </ul>
</span>

Thank you very much !

Derek 朕會功夫 · Accepted Answer · 2014-02-03 00:59:15Z

2

Instead of the :hover pseudo-class, use the :active pseudo-class.

So the CSS block would look like this:

a:active {
    color: black;
}

For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

edited Feb 3, 2014 at 0:59

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Feb 3, 2014 at 0:30

shovavnik

2,9473 gold badges26 silver badges21 bronze badges

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

10 Comments

Derek 朕會功夫 Over a year ago

But :active is applied on mousedown instead of click as @o6Qr described in the question.

shovavnik Over a year ago

@Derek朕會功夫 The question mentions press, not click.

Derek 朕會功夫 Over a year ago

Actually both are mentioned (if you look in the title) and this question could be considered ambiguous imo.

o6 qr Over a year ago

really i don't understand what's The difference between (press,click) to me both of them means same , i want click or press on photo even open popup

shovavnik Over a year ago

@o6qr Clicking is what you do with the mouse. But there are other ways to activate an element, such as with the keyboard or touch. :active works for all of them.

|

Derek 朕會功夫 · Accepted Answer · 2014-02-03 19:17:59Z

1

Toggle with only CSS is a little bit tricky, but here is one way of doing it:

Demo: http://jsfiddle.net/DerekL/R5Bm5/

<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>

.more{
    height: 0px;
    overflow: hidden;
}
#control:checked ~ .more{
    /*Do whatever you want here*/
    height: 20px;
}
#control{
    display: none;
}
#toggle{
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Of course, you can always toggle with JavaScript:

$("#toggle").click(function(){
    $(".more").toggle();
});

A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/

edited Feb 3, 2014 at 19:17

answered Feb 3, 2014 at 2:31

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

5 Comments

o6 qr Over a year ago

i will try it now , thnx

o6 qr Over a year ago

well , first thnx to you , but this's not i want ... i want data open on popup like facebook alert link or google+ link

Derek 朕會功夫 Over a year ago

@o6qr - Well this is only a demo. You can style the popup however you like by changing the CSS.

o6 qr Over a year ago

it's working but still not what i want , first i have already a code with 1 problem , now i have a lot problems , if i use your code i must make it as i want from beginning , popup open on the left i want it right , and text not wrap and the Button i want a image , many many problem and i'm not good in CSS , all i want fix first problem in my orignal code ...THNX

Derek 朕會功夫 Over a year ago

@o6qr - If you only want a fix, then here it is: jsfiddle.net/DerekL/5Ajau

Collectives™ on Stack Overflow

convert css code from :hover to click

2 Answers 2

10 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related