<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 07:27:25 浏览: 27
这是一段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结构和样式设置。
鼠标触碰变色内部式写法
你可以使用CSS中的:hover伪类来实现鼠标悬停时改变元素颜色的效果。以下是一些内部式写法的示例:
1. 改变背景颜色
```
<style>
.box {
background-color: green;
width: 100px;
height: 100px;
}
.box:hover {
background-color: red;
}
</style>
<div class="box"></div>
```
2. 改变文字颜色
```
<style>
.text {
color: green;
}
.text:hover {
color: red;
}
</style>
<p class="text">这是一段文字</p>
```
3. 改变边框颜色
```
<style>
.border {
border: 2px solid green;
width: 100px;
height: 100px;
}
.border:hover {
border-color: red;
}
</style>
<div class="border"></div>
```
4. 改变图片透明度
```
<style>
.img {
opacity: 0.5;
}
.img:hover {
opacity: 1;
}
</style>
<img class="img" src="example.jpg" alt="example">
```