浏览 6602 次 / [ 天下网闻 ] Discuz：主题列表页缩略图背景鼠标滑过高亮变色方法
  • 发布时间 2012-10-10 23:25

    • DOOOOR的主题列表修改过N次了，今天加入这个功能挺满意的，注明：howfar的css在这里用到的是li标签，
    FTP目录：template/你的主题文件夹/common/module.css
    之前代码如下：
    1. /*
    2.         Name:                        mod_media_list_thread
    3.         Level:                        Global
    4.         depentend:                .ml
    5.         Explain:                图片模式的帖子列表
    6.         Author:                        lushnis
    7.         Last Modify:        Pony 11121511
    8. */
    9.         .mlt {}
    10.                 .mlt li { display: inline; margin: 0 4px 10px; padding: 40px; border: 1px solid {SPECIALBG}; border-bottom-color: {SPECIALBORDER}; background: #191919; text-align: left; }
    11. .mlt .sum { display: inline-block; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 5px; background: {SPECIALBG}; }
    12.                                 .mlt .pin { background: #7B3; color: #FFF; }
    13.                                 .mlt .digest { background: #0BC; color: #FFF; }
    14.                         .mlt .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
    15.                         .mlt img.vm { display: inline; }

    17.                         .mlt h3 { height: 30px; line-height: 30px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    18.                         .mlt li .cl { height: 25px; overflow: hidden; }
    19.                                 .mlt li .c { height: auto !important; }
    20.                         .mlt li span { display: inline; color: {TABLETEXT}; }

    22. /*
    23.         Name:                        mod_threadlist_last-child
    24.         Level:                        Function
    25.         Explain:                帖子列表页支持 last-child 的浏览器不显示最后一条线
    26.         Last Modify:        Pony
    27. */
    复制代码
    修改后如下：
    1. /*
    2.         Name:                        mod_media_list_thread
    3.         Level:                        Global
    4.         depentend:                .ml
    5.         Explain:                图片模式的帖子列表
    6.         Author:                        lushnis
    7.         Last Modify:        Pony 11121511
    8. */
    9.         .mlt {}
    10.                 .mlt li { display: inline; margin: 0 4px 10px; padding: 40px; border: 1px solid {SPECIALBG}; border-bottom-color: {SPECIALBORDER}; background: #191919; text-align: left; }
    11.                 .mlt li:hover{background:#111111;}/*鼠标划过主题列表缩略图变色*/
    12.                         .mlt .sum { display: inline-block; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 5px; background: {SPECIALBG}; }
    13.                                 .mlt .pin { background: #7B3; color: #FFF; }
    14.                                 .mlt .digest { background: #0BC; color: #FFF; }
    15.                         .mlt .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
    16.                         .mlt img.vm { display: inline; }

    18.                         .mlt h3 { height: 30px; line-height: 30px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    19.                         .mlt li .cl { height: 25px; overflow: hidden; }
    20.                                 .mlt li .c { height: auto !important; }
    21.                         .mlt li span { display: inline; color: {TABLETEXT}; }

    23. /*
    24.         Name:                        mod_threadlist_last-child
    25.         Level:                        Function
    26.         Explain:                帖子列表页支持 last-child 的浏览器不显示最后一条线
    27.         Last Modify:        Pony
    28. */
    复制代码
    为了大家能看懂，贴的比较长，其实只在本例11行添加了一句：
    1. .mlt li:hover{background:#111111;}
    复制代码
    效果如下图：
    Discuz：主题列表页缩略图背景鼠标滑过高亮变色方法.jpg

    background:#111111;中#111111修改为期望颜色数值即可。

    CSS CODE：
    1. <style type="text/css">
    2. li:hover{background:red;}
    3. </style>
    复制代码
    本文出自www.DOOOOR.com，转载请保留本信息，谢谢！
    pedu19 11-24-2012 23:36
    沙发，板凳都没偶的份了。

    签|2011-2026-版权声明|平台（网站）公约|DOOOOR 设计网 ( 吉ICP备2022003869号 )|吉公网安备 22240102000357号 |联系客服