发新贴  快速回复

刚看视频学js遇到了一个问题,求好心人解答一下!!

yf494286786
2016-07-07 10:36
我今天做了一个搜狐视频激励片的列表展示,其中,当我鼠标移入的时候,整个div没有变大,导致我的active把下面的内容遮住了。因为我刚学js,是个菜鸟,百度了很多大神的解决方法看不懂,所以想求助于妙味论坛,希望各位能够予以解答。本菜鸟万分感谢!顺便说一下我看的是刘伟老师的js基础教程,讲得棒棒哒!
 
妙味-小仙
你好,建议上传你的代码,方便我们的讲师查看具体问题,给予解答
2016-07-07 13:55  回复本帖
yf494286786
forum.php?mod=redirect&goto=findpost&pid=110650&ptid=47769
你好,建议上传你的代码,方便我们的讲师查看具体问题,给予解答

好的,我现在就上传
2016-07-07 21:19  回复本帖
yf494286786
<!DOCTYPE><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
    h2,ul,div {margin:0;padding:0}
    li {list-style:none;}
    /*头部样式*/
    #large {
        width:268px;height:365px;padding:10px 7px 8px 15px;background-color:#dee7e7;
    }
    #header {
        width:254px;height:40px;background-color:#dee7e7;position:relative;border-bottom:1px #94bdd6 solid;
    }
    #header h3{
        color:#21638c;font-weight:bold;position:absolute;bottom:0;
    }
    #header ul{float:right;position:absolute;bottom:-1px;left:143px;}
    #header ul li{float:left;width:35px;height:24px;border:solid 1px #94bdd6;line-height:24px;text-align:center;font-size:13px;margin-left:-1px;color:#21638c;}
    .day {background-color:#fff;color:#000;font-weight:bold;}
    /*中部样式*/
    #content {
        width:254px;height:290px;
    }
    #content a {
        width:17px;height:13px;background-color:#21638c;text-decoration:none;font-size:13px;font-weight:bold;color:#fff;line-height:13px;text-align:center;position:absolute;top:7px;
    }
    #content ul li {
        cursor: pointer;width:254px;height:27px;font-size:13px;color:#000;border-bottom:#fff 1px dashed;position:relative;
    }
    #content ul li:last-child {
        border-bottom: none;
    }
    #content ul li span {
        margin-left:14px;width:250px;height:13px;line-height:13px;position:absolute;left:10px;top:7px;
    }
    /*下部样式*/
    #foot {
        width:254px;height:27px;color:#000;position:relative;
    }
    #foot a {float:right;line-height:13px;text-align:center;text-decoration:none;font-size:13px;}
    #foot a:hover {float:right;line-height:13px;text-align:center;text-decoration:underline;font-size:13px;color:red;}
    /*活动样式*/
    .show {
        display:block;
    }
    .active {
        color: #000;
        font-weight: bold;
        background: #fff;
        border-bottom: 1px solid #fff;
     }
    #content ul li div p {
        position:absolute;float: left;width: 150px;line-height: 16px;left:85px;top:-5px;
    }
    #content div {overflow: hidden;display:none;width:237px;height:66px;padding:2px;position:absolute;left:20px;top:5px;}
    #content div img { border:1px solid;width:80px;height:63px;position:absolute;}
    #content div a {
            width:30px;
            height:20px;
            position: absolute;
            right: 6px;
            top: 45px;
            color: #fff;
            background: #1A68A2;
            padding: 0 5px;
            font-size: 6px;
            line-height: 20px;
    }
</style>
<script>
    window.onload = function (){
        var oDiv = document.getElementById('content');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        oUl.style.display = "block";
        
        for(i=0;i<aLi.length;i++){
        fn1(aLi[i]);
        }
        
        function fn1 (obj){
            var aLink = obj.getElementsByTagName('a');
            var oDiv = obj.getElementsByTagName('div');
            
            obj.onmouseover = function (){
                 this.getElementsByTagName('div')[0].className = "active";
                 this.getElementsByTagName('a')[0].style.display = 'block';
                 this.getElementsByTagName('div')[0].style.display = 'block';
            };
            obj.onmouseout = function(){
                 this.getElementsByTagName('div')[0].className = "";
                 this.getElementsByTagName('a')[0].style.display = 'block';
                 this.getElementsByTagName('div')[0].style.display = 'none';
            };
        };
        
    };
</script>
<body>
<div id="large">
<div id="header">
    <h3>观看排行榜</h3>
    <ul>
        <li class="day">每日</li>
        <li>每周</li>
        <li>全部</li>
    </ul>
</div>
<div id="content">
    <ul class="show">
        <li><a href="#">1</a><span>解密:关于地球与人类的一千零一问</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">2</a><span>经典传奇:探索全世界重大历史事件</span>
                       <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">3</a><span>眼界:展现普通人的曲折命运和动人...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">4</a><span>档案(BTV):惊人事件和传奇背...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">5</a><span>世界十最:30个震惊世界的Top...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">6</a><span>身边的毛泽东:警卫员解密毛泽东秘...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">7</a><span>新电影传奇:每一步电影都有自己的...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
           </li>
        <li><a href="#">8</a><span>档案(上视纪实频道):解密档案中...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">9</a><span>探寻传世国宝的千古传奇</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">10</a><span>纪实系列:讲述社会百态,透视事实...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
    </ul>
</div>
<div id="foot"><a href="#">更多>></a></div>
</div>
</body>
</html>

2016-07-07 21:22  回复本帖
yf494286786

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
    h2,ul,div {margin:0;padding:0}
    li {list-style:none;}
    /*头部样式*/
    #large {
        width:268px;height:365px;padding:10px 7px 8px 15px;background-color:#dee7e7;
    }
    #header {
        width:254px;height:40px;background-color:#dee7e7;position:relative;border-bottom:1px #94bdd6 solid;
    }
    #header h3{
        color:#21638c;font-weight:bold;position:absolute;bottom:0;
    }
    #header ul{float:right;position:absolute;bottom:-1px;left:143px;}
    #header ul li{float:left;width:35px;height:24px;border:solid 1px #94bdd6;line-height:24px;text-align:center;font-size:13px;margin-left:-1px;color:#21638c;}
    .day {background-color:#fff;color:#000;font-weight:bold;}
    /*中部样式*/
    #content {
        width:254px;height:290px;
    }
    #content a {
        width:17px;height:13px;background-color:#21638c;text-decoration:none;font-size:13px;font-weight:bold;color:#fff;line-height:13px;text-align:center;position:absolute;top:7px;
    }
    #content ul li {
        cursor: pointer;width:254px;height:27px;font-size:13px;color:#000;border-bottom:#fff 1px dashed;position:relative;
    }
    #content ul li:last-child {
        border-bottom: none;
    }
    #content ul li span {
        margin-left:14px;width:250px;height:13px;line-height:13px;position:absolute;left:10px;top:7px;
    }
    /*下部样式*/
    #foot {
        width:254px;height:27px;color:#000;position:relative;
    }
    #foot a {float:right;line-height:13px;text-align:center;text-decoration:none;font-size:13px;}
    #foot a:hover {float:right;line-height:13px;text-align:center;text-decoration:underline;font-size:13px;color:red;}
    /*活动样式*/
    .show {
        display:block;
    }
    .active {
        color: #000;
        font-weight: bold;
        background: #fff;
        border-bottom: 1px solid #fff;
     }
    #content ul li div p {
        position:absolute;float: left;width: 150px;line-height: 16px;left:85px;top:-5px;
    }
    #content div {overflow: hidden;display:none;width:237px;height:66px;padding:2px;position:absolute;left:20px;top:5px;}
    #content div img { border:1px solid;width:80px;height:63px;position:absolute;}
    #content div a {
            width:30px;
            height:20px;
            position: absolute;
            right: 6px;
            top: 45px;
            color: #fff;
            background: #1A68A2;
            padding: 0 5px;
            font-size: 6px;
            line-height: 20px;
    }
</style>
<script>
    window.onload = function (){
        var oDiv = document.getElementById('content');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        oUl.style.display = "block";
        
        for(i=0;i<aLi.length;i++){
        fn1(aLi[i]);
        }
        
        function fn1 (obj){
            var aLink = obj.getElementsByTagName('a');
            var oDiv = obj.getElementsByTagName('div');
            
            obj.onmouseover = function (){
                 this.getElementsByTagName('div')[0].className = "active";
                 this.getElementsByTagName('a')[0].style.display = 'block';
                 this.getElementsByTagName('div')[0].style.display = 'block';
            };
            obj.onmouseout = function(){
                 this.getElementsByTagName('div')[0].className = "";
                 this.getElementsByTagName('a')[0].style.display = 'block';
                 this.getElementsByTagName('div')[0].style.display = 'none';
            };
        };
        
    };
</script>
<body>
<div id="large">
<div id="header">
    <h3>观看排行榜</h3>
    <ul>
        <li class="day">每日</li>
        <li>每周</li>
        <li>全部</li>
    </ul>
</div>
<div id="content">
    <ul class="show">
        <li><a href="#">1</a><span>解密:关于地球与人类的一千零一问</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">2</a><span>经典传奇:探索全世界重大历史事件</span>
                       <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">3</a><span>眼界:展现普通人的曲折命运和动人...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">4</a><span>档案(BTV):惊人事件和传奇背...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">5</a><span>世界十最:30个震惊世界的Top...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">6</a><span>身边的毛泽东:警卫员解密毛泽东秘...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">7</a><span>新电影传奇:每一步电影都有自己的...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
           </li>
        <li><a href="#">8</a><span>档案(上视纪实频道):解密档案中...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">9</a><span>探寻传世国宝的千古传奇</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li><a href="#">10</a><span>纪实系列:讲述社会百态,透视事实...</span>
                    <div>
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
    </ul>
</div>
<div id="foot"><a href="#">更多>></a></div>
</div>
</body>
</html>
2016-07-08 12:26  回复本帖
yf494286786
没人吗?求大神啊并解答一下,我看视频上说这个论坛能够找到解决方案
2016-07-08 21:26  回复本帖
忘川河
先说好我也是菜鸟,给你提个建议。吧li的高设为由内容撑开
2016-07-10 23:22  回复本帖
讲师-kimoo
同学你好~

这个效果推荐个思路,你可以这样试试,

每个li里面藏两个div,一个(命名为a)显示,一个(命名为b)隐藏,

手动为li添加class 为active, active下的a隐藏,b显示

当鼠标移入的时候,去掉所有li的class,为移入的li添加class即可。
2016-07-11 17:33  回复本帖
yf494286786
forum.php?mod=redirect&goto=findpost&pid=110814&ptid=47769
先说好我也是菜鸟,给你提个建议。吧li的高设为由内容撑开

谢谢你哈,大兄弟!没有用你的方法,但还是很感谢你!
2016-07-11 17:38  回复本帖
yf494286786
forum.php?mod=redirect&goto=findpost&pid=110865&ptid=47769
同学你好~

这个效果推荐个思路,你可以这样试试,


你好,行,我试试看
2016-07-11 17:38  回复本帖
yf494286786
forum.php?mod=redirect&goto=findpost&pid=110865&ptid=47769
同学你好~

这个效果推荐个思路,你可以这样试试,


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
    h2,ul,div {margin:0;padding:0}
    li {list-style:none;}
    /*头部样式*/
    #large {
        width:268px;height:365px;padding:10px 7px 8px 15px;background-color:#dee7e7;
    }
    #header {
        width:254px;height:40px;background-color:#dee7e7;position:relative;border-bottom:1px #94bdd6 solid;
    }
    #header h3{
        color:#21638c;font-weight:bold;position:absolute;bottom:0;
    }
    #header ul{float:right;position:absolute;bottom:-1px;left:143px;}
    #header ul li{float:left;width:35px;height:24px;border:solid 1px #94bdd6;line-height:24px;text-align:center;font-size:13px;margin-left:-1px;color:#21638c;}
    .day {background-color:#fff;color:#000;font-weight:bold;}
    /*中部样式*/
    #content { clear: left;
        width:254px;height:290px;
    }
    #content a {
        width:17px;height:13px;background-color:#21638c;text-decoration:none;font-size:13px;font-weight:bold;color:#fff;line-height:13px;text-align:center;position:absolute;top:7px;
    }
    #content ul li {
        overflow:hidden;cursor: pointer;width:254px;height:27px;font-size:13px;color:#000;border-bottom:#fff 1px dashed;position:relative;
    }
    #content ul li:last-child {
        border-bottom: none;
    }
    .li_div1 {
        margin-left:14px;width:250px;height:13px;line-height:13px;position:absolute;left:10px;top:7px;
    }
    .li_div2 {
        width:254px;height:82px;background-color:#fff;display:none;
    }
    .li_div2 img {
        width:82px;height:65px;float:left;
    }
    .li_div2 p {
        float: left;
        width: 150px;
        line-height: 16px;
        padding-top: 10px;
    }
    .li_div2 a {
        position: absolute;
        right: 10px;
        bottom: 4px;
        color: #fff;
        background: #1A68A2;
        padding: 0 5px;
        font-size: 10px;
        line-height: 20px;
    }
    /*下部样式*/
    #foot {
        width:254px;height:27px;color:#000;position:relative;
    }
    #foot a {float:right;line-height:13px;text-align:center;text-decoration:none;font-size:13px;}
    #foot a:hover {float:right;line-height:13px;text-align:center;text-decoration:underline;font-size:13px;color:red;}
    /*活动样式*/
    .active .li_div1 {
        display:none;
    }
    .active .li_div2 {
        display:block;
    }
</style>
<script>
window.onload = function (){
    var oDiv = document.getElementById('content');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    
    for(i=0;i<aLi.length;i++){
        fn(aLi[i]);
    }
    function fn(oLi){
            oLi.onmouseover = function (){
            for(i=0;i<aLi.length;i++){
            aLi[i].className = "";
            }
            oLi.className = "active";
            }
        oLi.onmouseout = function (){
            for(i=0;i<aLi.length;i++){
            aLi[i].className = "";
            }
        }
    }
}
</script>
<body>
<div id="large">
<div id="header">
    <h3>观看排行榜</h3>
    <ul>
        <li class="day">每日</li>
        <li>每周</li>
        <li>全部</li>
    </ul>
</div>
<div id="content">
    <ul>
        <li class="active"><a href="#">1</a><div class="li_div1">解密:关于地球与人类的一千零一问</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">2</a><div class="li_div1">经典传奇:探索全世界重大历史事件</div>
                       <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">3</a><div class="li_div1">眼界:展现普通人的曲折命运和动人...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">4</a><div class="li_div1">档案(BTV):惊人事件和传奇背...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">5</a><div class="li_div1">世界十最:30个震惊世界的Top...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">6</a><div class="li_div1">身边的毛泽东:警卫员解密毛泽东秘...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">7</a><div class="li_div1">新电影传奇:每一步电影都有自己的...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
           </li>
        <li class="active"><a href="#">8</a><div class="li_div1">档案(上视纪实频道):解密档案中...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">9</a><div class="li_div1">探寻传世国宝的千古传奇</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
        <li class="active"><a href="#">10</a><div class="li_div1">纪实系列:讲述社会百态,透视事实...</div>
                    <div class="li_div2">
                        <img src="pen.png" alt="pen">
                        <p>
                           解密:关于地球与人类的一千零一问 
                        </p>
                        <a href="#">播放</a>
                    </div>
        </li>
    </ul>
</div>
<div id="foot"><a href="#">更多>></a></div>
</div>
</body>
</html>


按照你的方法弄了,鼠标移入的时候,结果li还是没有被撑开,因为是新手,上传不了图片,但是我这样描述,你可以理解吧?
2016-07-11 18:29  回复本帖
yf494286786
forum.php?mod=redirect&goto=findpost&pid=110865&ptid=47769
同学你好~

这个效果推荐个思路,你可以这样试试,


出来了,究其原因是在于我把li和div的高设死了,导致他没有根据里面的内容来自动设定宽高。充分暴露自己的css基础不牢固。
2016-07-12 12:01  回复本帖
登录 后才可以发表回复