I learned the response of the window scroll event before, and now I will learn to select different styles of display according to the different positions of the mouse, so that the area where the mouse is located can be dynamically distinguished, and it also acts as a reminder. You can learn how to use jQuery to manipulate CSS and the hover() method of the mouse through examples. The code of this example is as follows:
In this example, the css page/page.css is loaded in the header element, which determines the page display color and font size, as well as the alignment of the font. Then load the jquery library and run the js code written, this code is as follows:
$(document).ready(function(){
$('#switcher').hover(
function(){ $(this).addClass('hover '); },
function(){ $(this).removeClass('hover'); }
);
});
The method is used here:
hover() run two functions.
The method fires the mouseenter and mouseleave events.
Note: If only one function is specified, both mouseenter and mouseleave execute it.
The first parameter of this function is the event that responds to the mouse entry, and the second parameter is the event that responds to the mouse leaving.
Note that $(this) is used here, which is the label object corresponding to the string this, that is, the div section with the ID of switcher.
Also add the style functions addClass and removeClass here: The
addClass() method adds one or more class names to the selected element.
This method does not remove the existing class attribute, it just adds one or more class names to the class attribute.
Tip: To add multiple classes, separate the class names with spaces.
The removeClass() method removes one or more classes from the selected element.
Note: If no parameter is specified, this method will remove all classes from the selected elements.
These two functions are to dynamically add and delete styles, so the page will dynamically display different colors, fonts, and so on.
TensorFlow introductory basic tutorial
<html>
<head>
<meta charset="utf-8">
<title>Article Display System</title>
<link rel="stylesheet" href="page/page.css" type="text/css" />
<script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#switcher').hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);
});
</script>
</head>
<body>
<div id="container">
<div id="switcher" class="switcher">
<h3>Page layout selection</h3>
<button id="switcher-default">
default
</button>
<button id="switcher-narrow">
general display
</button>
<button id="switcher-large">
Large display
</button>
</div>
</div>
<span></span>
</body>
</html>
In this example, the css page/page.css is loaded in the header element, which determines the page display color and font size, as well as the alignment of the font. Then load the jquery library and run the js code written, this code is as follows:
$(document).ready(function(){
$('#switcher').hover(
function(){ $(this).addClass('hover '); },
function(){ $(this).removeClass('hover'); }
);
});
The method is used here:
hover() run two functions.
The method fires the mouseenter and mouseleave events.
Note: If only one function is specified, both mouseenter and mouseleave execute it.
The first parameter of this function is the event that responds to the mouse entry, and the second parameter is the event that responds to the mouse leaving.
Note that $(this) is used here, which is the label object corresponding to the string this, that is, the div section with the ID of switcher.
Also add the style functions addClass and removeClass here: The
addClass() method adds one or more class names to the selected element.
This method does not remove the existing class attribute, it just adds one or more class names to the class attribute.
Tip: To add multiple classes, separate the class names with spaces.
The removeClass() method removes one or more classes from the selected element.
Note: If no parameter is specified, this method will remove all classes from the selected elements.
These two functions are to dynamically add and delete styles, so the page will dynamically display different colors, fonts, and so on.
The result of running is as follows:
The code of page.css is as follows:
/***************************************
Default Styles
************************************** */
html, body {
margin: 0;
padding: 0;
}
body {
font: Arial,"Microsoft YaHei","Black Body","宋体",sans-serif;
color: #000;
background: #fff;
}
#container {
font-size: 1.2em;
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
code {
font-size: 1.2em;
}
a {
color: #06581f;
}
/***************************************
page Styles
************************************** */
.poem {
margin: 0 5em;
}
.chapter {
margin: 1em;
}
.switcher {
float: right;
background-color: #c0c0c0;
border: 1px solid #000000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
.switcher h3 {
margin: .5em 0;
}
#header {
clear: both;
}
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
.selected {
font-weight: bold;
}
.hidden {
display: none;
}
.hover {
cursor: pointer;
background-color: #20b2aa;
}