Question

<head>

<style>
    .divTable {
        display: table;
        float: right;
        height: 180px;
        background-color: #0082CA;
    }

    .divTableBody {
        display: table-row-group;
    }

    .divTableRow {
        display: table-row;
    }

    .menuLink, .icon {
        display: table-cell;
        padding: 10px 0px;
    }

    .menuLink {
        display: none;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
    }

        .menuLink a {
            font-size: large;
            text-decoration: none;
            color: white;
        }

    .divTableRow:hover {
        background-color: #005C8F;
    }

    .icon {
        width: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

        .icon img {
            width: 20px;
            height: 20px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

    .userProfile {
        height: 30px;
        width: 30px;
        border-radius: 50%;
    }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

    $(document).ready(function ()
    {

        $('.menuLink, .icon')
            .mouseover(function () {

                $(".menuLink").stop(true, false).fadeIn(280);
                $('.menuLink').stop(true, false).animate({
                    width: "300px",
                    opacity: "1",
                    "padding-left": "10px"
                });
            })

            .mouseleave(function () {

                $('.menuLink').stop(true, false).animate({
                    width: "0px",
                    opacity: "0",
                    "padding-left": "0px"

                });       
            });
    });

</script>

            <div class="divTableRow">
                <div class="menuLink"><a href="http://www.youtube.com">news feeds</a>
                </div>

                <div class="icon">
                    <img src="img/signout.png" />
                </div>
            </div>

        </div>

    </div>

我喜欢在一个类似于Facebook的图标上创建一个计数器，在那里你有一个小红框来显示有多少朋友请求但我不知道应该如何开始。我说得对，这可以通过工具提示来完成吗？

我有一个包含新闻源图标的菜单，我正在使用C＃和HTML语言。所以我想知道如何创建显示新闻系统数量的小盒子。

谢谢，

新闻源图标显示小盒子计数器

0 个答案: