如何在网页上显示文字时加下划线？

时间：2016-01-09 04:36:58

标签： jquery html css animation

当用户向下滚动并且header-box-2变得可见时，我想让我的标题文本具有下划线动画。我该怎么做？使用J-Query？

一个例子是我向下滚动到我的第一部分，一旦header-box-2我希望它为header-box-2的文本加下划线。

我想要执行此操作的标题是header-box-2。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="swdd.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>
    <a href="#" id="open">menu</a> 
    <nav class="nav-fixed-clear">
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#services">services</a></li>
            <li><a href="#portfolio">portfolio</a></li>
            <li><a href="#contactme">contact us</a></li>
        </ul>
    </nav>

    <script> 
        $("#open").click(function() {
            $(".nav-fixed-clear").slideToggle(300, function() {
                $(this).toggleClass("nav-expanded").css("display", "");
            });
        }); 
    </script>

    <div class="home-box">
        <div class="welcome-box">
            <div class="header-box-1">
                <h1>hello there.</h1>
            </div>
            <div class="para-box-1">
                <p>my name is syd.</p>
            </div>
        </div>
    </div>

    <a href="#" name="about"></a>
    <div class="section-box-1">
        <div class="content-box-1">
            <div class="header-box-2">
                <h2>Who am I?</h2>
            </div>
            <div class="para-box-1">
                <p>My name is Syd.  I am web designer and developer.  </p>
            </div>
        </div>
    </div>

    <a href="#" name="services"></a>
    <div class="section-box-2">
        <div class="content-box-1">
            <div class="header-box-2">
                <h2>My services: </h2>
            </div>
            <div class="para-box-1">
                <p>I specialize single-page web design.  What makes me unique from many web designers today is that I code my websites from scratch.  Because of this I can create a truly original design for you.   </p>
            </div>
        </div>
    </div>

</body>
</html>


body {margin: 0; padding: 0;}

/*********************/
/*				   	 */
/*	nav-fixed-clear  */
/*				     */
/*********************/

/* This navigation bar is best for websites with light backgrounds. */

.nav-fixed-clear {
	position: fixed;
	width: 100%;
	border-bottom: 1px solid transparent;
	transition: border ease-in-out 1s;
	z-index: 3;
}

.nav-fixed-clear:hover {
	border-color: #000000;
}

.nav-fixed-clear ul {
	list-style: none;
	margin: 0 auto;
	width: 70%;
}

.nav-fixed-clear li {
	display: block;
}

.nav-fixed-clear a {
	color: #000000;
	float: left;
	margin: 1% 6%;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
    border-bottom: 1px solid transparent;
	transition: border ease-in-out .5s;
	font-size: 1em;
}

.nav-fixed-clear a:hover {
	border-color: red;
	
}

#open {
	display: none;
	font-family: 'Roboto', sans-serif;
	color: #000000;
	text-decoration: none;
	margin: 0;
	padding: 2%;
	
	border-bottom: 3px solid black;
}



@media only screen and (max-width: 990px) {
	.nav-fixed-clear {
		border-bottom: none;
		transition: none;
		display: none;
		position: static;
	}
	.nav-fixed-clear ul {
		padding: 0;
		margin: 0;
		width: 100%
	}
	
	.nav-fixed-clear li {
		padding: 2%;
		border-bottom: 1px solid gray;
		width: 100%;
	}
	
	.nav-fixed-clear a {
		float: none;
		margin: 0;
	
	}
	
	#open {
		display: block;
		
	}
	
	
	.nav-expanded {
		display: block;
		
	}
}

.home-box {
	width: 100%;
	height: 100vh;
	position: absolute;
}

.welcome-box {
	width: 65%;
	margin: 0 auto;
	margin-top: 20%;
	font-family: 'Roboto', sans-serif;
}

.header-box-1 {
	font-size: 2em;
	color: #333333;
}

.para-box-1 {
	font-size: 1.2em;
	color: #4d4d4d;
	text-transform: lowercase;
}

.section-box-1 {
	top: 100%;
	height: 100vh;
	width: 100%;
	position: absolute;
}

.content-box-1 {
	font-family: 'Roboto', sans-serif;
	width: 65%;
	margin: 0 auto;
	margin-top: 5%;
}

.header-box-2 {
	font-size: 1.5em;
	color: #333333;
	text-transform: lowercase;
}

.section-box-2 {
	top: 200%;
	height: 100vh;
	width: 100%;
	position: absolute;
}

2 个答案:

答案 0 :(得分：1)

点击[https://jsfiddle.net/up4nu/]它对您有所帮助

答案 1 :(得分：0)

试试这个针对boostrap词缀概念的示例编码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative;
  }
  .affix {
      top: 20px;
  }
  div.col-sm-9 div {
      height: 250px;
      font-size: 28px;
  }
  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3 {color: #fff; background-color: #ff9800;}
  #section41 {color: #fff; background-color: #00bcd4;}
  #section42 {color: #fff; background-color: #009688;}

  @media screen and (max-width: 810px) {
    #section1, #section2, #section3, #section41, #section42  {
        margin-left: 150px;
    }
  }
  </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
  <h1>Scrollspy & Affix Example</h1>
  <h3>Fixed vertical sidenav on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
  <p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>
</div>
<br>

<div class="container">
  <div class="row">
    <nav class="col-sm-3" id="myScrollspy">
      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#section41">Section 4-1</a></li>
            <li><a href="#section42">Section 4-2</a></li>                     
          </ul>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9">
      <div id="section1">    
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section2"> 
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>        
      <div id="section3">         
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section41">         
        <h1>Section 4-1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>      
      <div id="section42">         
        <h1>Section 4-2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>
相关问题
最新问题