Question

我有一个问题：有代码，当鼠标悬停在图像上时，弹出窗口会打开和关闭，我希望它在我按下图像时打开和关闭。

关于此代码的照片：

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

完整代码：

<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>

非常感谢！

Answer 1

使用:hover伪类，而不是:active伪类。

所以CSS块看起来像这样：

a:active {
    color: black;
}

有关详细信息，请查看以下内容：https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Answer 2

仅使用CSS进行切换有点棘手，但这是一种方法：

演示：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;
}

当然，您始终可以使用JavaScript进行切换：

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

根据您的说明更好的演示：http://jsfiddle.net/DerekL/R5Bm5/2/

转换css代码：hover to click

2 个答案: