小编Fal*_*hal的帖子

下面的代码在Opera中运行良好,但在FF和Chrome中没有.标题部分从像素(行)100px开始,而不是页面顶部的0px.我想错过什么使它跨浏览器兼容？

注意:标题始终固定在顶部,并根据滚动操作扩展到100px高度或缩小到50px高度也可以正常工作.

jfiddle失败的原因.我无法创造它.

谢谢

JS

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

        <script type="text/javascript">
            $(document).ready(function ()
            {
                var showing_default = true;
                var did_scroll = false;

                $(window).on("scroll", function (e)
                {
                    did_scroll = true;
                });

                window.setInterval(function ()
                {
                    if (did_scroll)
                    {
                        did_scroll = false;

                        if (showing_default && $(document).scrollTop() >= 100)
                        {
                            showing_default = false;
                            $("#header_container").css('position', 'fixed');
                            $("#default").stop().hide();
                            $("#sticky").fadeIn(500);
                        }
                        else if (! showing_default && $(document).scrollTop() < 100)
                        {
                            showing_default = true;
                            $("#sticky").stop().hide();
                            $("#default").fadeIn(500);
                            $("#header_container").css('position', 'fixed');
                        }
                    }
                }, 250);
            });
        </script>

CSS

            /* --- COMMON ---------------------------------------------- */ …

我有一个带有背景图像的 div。如何做到这一点：当你悬停在那个 div 上时，背景图像向上移动 5 像素，然后向下移动 5 像素？例如快起来，慢下来。

我的代码：

CSS

<style>
.place {
background:url(../img/place.png) no-repeat 6px 50%;
}
</style>

HTML

 <div class="place">
    123 Something Street<br/>
    UB5 212 Liverpool
    </div>

如何通过过渡做到这一点？还是jquery？

我有两个div并且我想如果我在一个div上盘旋,两个div的边框颜色应该改变...

CSS:

.uperdiv {
width:80%;
background-color:black;
margin-left:10%;
border-style:none solid none solid ;
border-width:5px; 
border-color:#fff;
border-top-style:none;
height:170px;
margin-top:-220px;
transition:border-color 2s;
-moz-transition:border-color 2s;
-webkit-transition:border-color 2s;
-o-transition:border-color 2s;
}
.uperdiv:hover + .lowerdiv{
border-color:#9900ff;
}   
.lowerdiv {
border-style:none solid solid solid ;
border-color:#fff;
border-width:5px;
background-color:black;
width:80%;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height:50px;
margin-left:10%;
}

HTML

<div class="uperdiv">
Some text
</div>
<div class="lowerdiv">
</div>

我试过+符号,但是当我将鼠标悬停在uper div上时,它会改变较低的div边框颜色......你可以说我想创建一个div的效果.现在我不知道..有什么办法吗？并且PLZ不使用jquery和javascript只有css和css3在此先感谢:)

我有一个菜单,我想在左边使用边框,但这里是我想要的想要的外观,我能够添加边框,但它将采取li元素的完整高度,我也不希望出现边框在子菜单上

例如:aunipark.in

这是我的代码:

HTML

<div class="menudiv">
<div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                        <ul>
                        <li><a href="#">School</a></li>
                        <li><a href="#">Vision and Mission </a></li>
                        <li><a href="#">Principal’s desk</a>
                        <li><a href="#">Management</a>
                        </ul> </li>
                <li><a href="#">Admission</a>
                        <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Download application form</a></li>
                        </ul> </li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">School Calander</a></li>
                <li><a href="#">News & Events</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>               
            </ul>
        </div>
</div>

CSS

.menudiv
{

    width:980px;
}


.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;



}

.menu ul ul {
        display: none;

    }

.menu ul li:hover > ul …

我已经尝试了很多,但我无法解决这个问题,

菜单问题无法显示响应.

我尝试像这个演示的响应菜单

并希望像这样

HTML

<div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li id="fat-menu" class="dropdown pink"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Services </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown rama"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Products </a>
            <div class="dropdown-menu" style="left:-250px !important; width:800px; " role="menu" aria-labelledby="drop3">
              <div class="nav-product"  role="main"> …

我正在下拉菜单栏上工作,我需要将它放在网页的中心.我在网页的每个页面调用相同的div.

<head>

CSS

<style>
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {margin: 0 0 0 200px;}
ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; float: left; }
ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: …