<style> .red{ width: 30px; height: 20px; background-color: red; &:hover .green { width:500px; height:400px; background-color:grren; } } .green:hvoer { background-color: blue; } </style> <div class="red"> <div class="green"></div> </div>
时间: 2024-02-15 13:27:25 浏览: 145
这是一段CSS代码,它定义了两个类:red和green。red类表示一个宽为30像素、高为20像素、背景颜色为红色的元素,同时当鼠标悬停在该元素上时,它内部的green元素的宽度和高度将变为500像素和400像素,并且背景颜色将变为绿色。而green类则表示一个默认情况下背景颜色为透明的元素,当鼠标悬停在其父元素red上时,它的背景颜色将变为蓝色。
相关问题
创建一个HTML页面,使用<script>标记直接引入jQuery文件;定义一个div,并嵌套七个子div;设置应用于外层div的样式类(宽600px、高85px、边框1px灰色实线 等),设置嵌套的内层div样式(宽80px、高80px、float: left 等),设置应用于嵌套的七个div的七个样式类(背景色分别为七种颜色);使用jQuery获取内层div元素,应用fadeTo()方法淡入显示内层div并调整到指定的透明度;使用jQuery获取内层div元素,并通过事件方法绑定hover()事件,获取当前元素,实现鼠标移到该元素上应用fadeTo()方法淡入显示内层div至透明度1,鼠标从该元素移出时应用fadeTo()方法淡入显示内层div并调整到指定的透明度。
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery练习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.outer {
width: 600px;
height: 85px;
border: 1px solid gray;
}
.inner {
width: 80px;
height: 80px;
float: left;
}
.color1 {
background-color: red;
}
.color2 {
background-color: orange;
}
.color3 {
background-color: yellow;
}
.color4 {
background-color: green;
}
.color5 {
background-color: blue;
}
.color6 {
background-color: indigo;
}
.color7 {
background-color: violet;
}
</style>
<script>
$(document).ready(function() {
$('.inner').fadeTo(0, 0.5); //初始设置内层div透明度为0.5
$('.inner').hover(function() {
$(this).stop().fadeTo(200, 1); //鼠标移入时淡入显示至透明度1
}, function() {
$(this).stop().fadeTo(200, 0.5); //鼠标移出时淡入显示至透明度0.5
});
});
</script>
</head>
<body>
<div class="outer">
<div class="inner color1"></div>
<div class="inner color2"></div>
<div class="inner color3"></div>
<div class="inner color4"></div>
<div class="inner color5"></div>
<div class="inner color6"></div>
<div class="inner color7"></div>
</div>
</body>
</html>
```
在这个页面中,我们使用了jQuery的fadeTo()方法来实现内层div的淡入淡出效果,并使用了hover()方法来实现鼠标移入移出的效果。同时,我们也实现了所要求的HTML结构和样式设置。
1.创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
好的,下面是代码实现:
1. 创建一个三行三列的表格,一个按钮,点击按钮时表格背景颜色变绿色
```html
<!-- HTML代码 -->
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button onclick="changeBgColor()">点击变绿色</button>
<script>
function changeBgColor() {
var table = document.querySelector("table");
table.style.backgroundColor = "green";
}
</script>
```
2. 创建一个盒子,鼠标移入时宽高变为250px,移出时宽高变回100px
```html
<!-- HTML代码 -->
<div class="box"></div>
<!-- CSS代码 -->
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
```
这个盒子的宽高会在鼠标移入时变为250px,移出时变回100px,而盒子的背景颜色随意填写。
阅读全文