Use css to set up a dropdown menu
.a {
position: relative; //position absolute position relative objects cannot be stacked
display: inline-block; //Inline elements can set the width and height properties of the block element
}
.b {
display: none;
position: absolute; //absolute is absolute positioning, relative is relative positioning
background-color: #f9f9f9;//Color
min-width: 160px;//Minimum width
padding: 12px 16px; // padding
}
.a:hover .b { //Hover event is the mouse will change on this
display: block; // will become a block-level element and will not be on one line
}
html
</head>
<body>
<h2>A drop-down menu appears when the mouse is moved</h2>
<p>Move the mouse over the specified element to see the drop-down menu. </p>
<div class="a">
<span>Mouse over to me! </span>
<div class="b">
<p>Gao Fan</p>
<p>[email protected]</p>
</div>
</div>
span has no fixed format, he is an inline element
The :contains selector selects elements that contain the specified string
$("p:contains(is)") selects all p elements with is
$(document).ready(function(){
$("p:contains(X)").css("background-color","black");
});
<body>
<h1> My Homepage</h1>
<p class="intro">My name is Gaofan</p>
<p>My best friend is XX</p>
</body>
It will select the element whose p tag has an X and set it to black
You can use the jquery animate method to do a simple animation effect
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
<body>
<button>Start animation</button>
<div class="g">l</div>
css
.g{
background:black;
height:100px
width:100px;
position:absolute;
}
The DIV block will stop when it is 250px from the left