CSS achieves the effect of changing the color of the entire line when the mouse is placed on it
|
summary: The following is a method for changing the color of the entire row when the mouse is placed on a specified row in CSS, as shown below: Implementation ideas: Use the :hover pseudo-class to change the background color when the mouse is pointing to it, as shown in the following example: example: When the mouse is placed on the div below, the background color changes accordingly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>Maomao Tutorial (www.maomao365.com)</title>
<style type="text/css">
div{
overflow:hidden;
white-space:nowrap;
height:30px;
width:250px;
background-color:white;
color:black;
}
.divTest:hover{
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="divTest">When the div mouse moves over, the background color changes</div>
</body>
</html>
Summarize The above is the CSS that the editor introduced to you to achieve the color change effect of the entire line when the mouse is placed on it. I hope it will be helpful to you! |
<<: Introduction to the use of select optgroup tag in html
>>: Docker image loading principle
Recommend
Detailed explanation of the steps to build a Vue project with Vue-cli
First you need to install Vue-cli: npm install -g...
CocosCreator general framework design resource management
Table of contents Problems with resource manageme...
An example of changing traditional replication to GTID replication without stopping business in MySQL 5.7
Due to the advantages of GTID, we need to change ...
Detailed explanation of the reasons and solutions for Docker failing to start normally
1. Abnormal performance of Docker startup: 1. The...
Simple Mysql backup BAT script sharing under Windows
Preface This article introduces a simple BAT scri...
js implements a simple calculator
Use native js to implement a simple calculator (w...
Superficial Web Design
<br />I have always believed that Yahoo'...
Example of how to configure nginx in centos server
Download the secure terminal MobaXterm_Personal F...
CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged
There is such a scenario: a circular container, t...
Tutorial on installing MySQL 8.0.11 using RPM on Linux (CentOS7)
Table of contents 1. Installation preparation 1. ...
Sitemesh tutorial - page decoration technology principles and applications
1. Basic Concepts 1. Sitemesh is a page decoratio...
Summary of common tool examples in MySQL (recommended)
Preface This article mainly introduces the releva...
How to build a deep learning environment running Python in Docker container
Check virtualization in Task Manager, if it is en...
Native JS to implement login box email prompt
This article shares a native JS implementation of...