2 qq 21608393 qq_21608393 于 2016.01.29 11:09 提问

web,大神看看这个功能怎么实现的。
web

http://vhello.cn/
公告下方的,鼠标移动上去后显示其他颜色。这是html5的吗?

10个回答

rui888
rui888   Ds   Rxr 2016.01.29 11:25
 <dl class="clearfix">
            <dd class="vborder">
                <a href="/index.php?g=Home&amp;m=Index&amp;a=fc">
                    <div class="fimg icon website"></div>
                    <h3>微官网</h3>
                </a>
                <p>5分钟轻松建站<br>打造酷炫微官网</p>
            </dd>
            <dd class="vborder">
                <a href="/index.php?g=Home&amp;m=Index&amp;a=fc">
                    <div class="fimg icon member"></div>
                    <h3>微会员</h3>
                </a>
                <p>方便携带&nbsp;永不挂失<br>消费积分&nbsp;一卡配备</p>
            </dd>
            <dd class="vborder">
                <a href="/index.php?g=Home&amp;m=Index&amp;a=fc">
                    <div class="fimg icon activities"></div>
                    <h3>微活动</h3>
                </a>
                <p>吸引用户参与<br>增强用户沉淀</p>
            </dd>
            <dd class="vborder active">
                <a href="/index.php?g=Home&amp;m=Index&amp;a=fc">
                    <div class="fimg icon Push"></div>
                    <h3>微推送</h3>
                </a>
                <p>无线周边推广<br>提高品牌知名度</p>
            </dd>
            <dd class="">
                <a href="/index.php?g=Home&amp;m=Index&amp;a=fc">
                    <div class="fimg icon service"></div>
                    <h3>微服务</h3>
                </a>
                <p>提供生活服务<br>增加用户粘性</p>
            </dd>
        </dl>

js 实现

 <script>
                $(document).ready(function(){
                    $(".feature-content dd").hover(
                        function(){
                            $(this).addClass("active")
                        },
                        function(){
                            $(this).removeClass("active");
                        }
                    );  
                });
            </script>
qq_21608393
qq_21608393 回复叶芝殇: 谢谢,我再看看
接近 2 年之前 回复
jiuwohuge
jiuwohuge 回复qq_21608393: 应该是没问题的,聚焦失焦改变class样式,并没有问题。这个正解啥
接近 2 年之前 回复
qq_21608393
qq_21608393 没有效果呀。。
接近 2 年之前 回复
caozhy
caozhy
接近 2 年之前 回复
caozhy
caozhy   Ds   Rxr 2016.01.29 11:21

http://vhello.cn/tpl/Home/laoyang/common/css/img/icon.png
它是js切换的,有两排图标,一个灰色的,一个蓝色的。

showbo
showbo   Ds   Rxr 2016.01.29 11:31

:hover样式而已,然后设置样色和背景图片的位置(background-position)

qq_21608393
qq_21608393   2016.01.29 11:45

这中图标不能自定义吗?还是有图标库?

qq_21608393
qq_21608393   2016.01.29 12:20

有没有实例代码呀?用图片做背景就好。。。

qq_21608393
qq_21608393   2016.01.29 14:43

one
已经实现,这种方法更简单。

qq_21608393
qq_21608393   2016.01.29 14:44

one

qq_21608393
qq_21608393   2016.01.29 14:45
 <a href=http://www.kmwzjs.com><img src="images/logo.jpg" onmouseover="this.src='images/h.jpg'" onmouseout="this.src='images/logo.jpg'" />one</a></div>
rui888
rui888   Ds   Rxr 2016.01.29 11:17
jk_wzw
jk_wzw   2016.01.29 11:15

CSS3的:hover选择器

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!