使用hover怎么改变另外一个div display的属性
时间: 2024-05-01 19:19:53 浏览: 107
可以使用CSS中的兄弟选择器来实现。例如,当鼠标悬停在一个元素上时,可以通过以下方式控制另一个元素的显示:
HTML代码:
```
<div class="hover-element">当鼠标悬停时,我将改变另一个元素的显示</div>
<div class="display-element">我将在鼠标悬停时显示</div>
```
CSS代码:
```
.display-element {
display: none;
}
.hover-element:hover + .display-element {
display: block;
}
```
解释一下,我们首先将`display-element`元素的显示设置为`none`,表示默认情况下该元素不会显示。
然后,我们使用兄弟选择器`+`来选择`hover-element`元素的下一个兄弟元素`display-element`,并在其上设置`display: block`,表示当`hover-element`元素被悬停时,`display-element`元素将显示出来。
这样,当鼠标悬停在`hover-element`元素上时,`display-element`元素将显示出来。
相关问题
一个高度固定的div里面有好几个p标签 当p标签过多超出div的高度时 让div最底部显示省略号 同时超出div的不显示 当我hover时使用css让div不再是固定的高度 能够将所有内容显示出来 请你给出五种写法
以下是五种实现方式:
1. 使用 CSS 的 text-overflow 属性和 overflow 属性实现:
```html
<div class="container">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
```
```css
.container {
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container:hover {
height: auto;
}
```
2. 使用 CSS 的 max-height 属性和 :after 伪元素实现:
```html
<div class="container">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
```
```css
.container {
position: relative;
max-height: 100px;
overflow: hidden;
}
.container:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background-color: white;
padding: 0 5px;
}
.container:hover {
max-height: none;
}
.container:hover:after {
display: none;
}
```
3. 使用 JavaScript 动态计算高度并添加省略号:
```html
<div class="container" id="container">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
```
```css
.container {
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
```javascript
const container = document.getElementById("container");
const ps = Array.from(container.getElementsByTagName("p"));
const maxHeight = 100;
let totalHeight = 0;
for (let i = 0; i < ps.length; i++) {
totalHeight += ps[i].offsetHeight;
if (totalHeight > maxHeight) {
ps[i].style.display = "none";
container.classList.add("has-ellipsis");
break;
}
}
```
```css
.container.has-ellipsis:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background-color: white;
padding: 0 5px;
}
.container:hover {
height: auto;
}
.container:hover:after {
display: none;
}
```
4. 使用 CSS 的 clamp() 函数实现:
```html
<div class="container">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
```
```css
.container {
height: clamp(50px, 100px, auto);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
```css
.container:hover {
height: auto;
}
```
5. 使用 CSS 的 grid 布局实现:
```html
<div class="container">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
```
```css
.container {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(20px, 1fr));
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
```css
.container:hover {
height: auto;
}
```
以上是五种实现方式,可以根据实际情况选择适合自己的方式。
html鼠标悬停显示多个div,怎么使鼠标滑过一个div,另外一个div显示出来
可以通过CSS中的:hover伪类和display属性来实现鼠标悬停时显示多个div。
具体实现步骤如下:
1. 在html中创建多个div,并设置它们的样式和位置。
2. 在CSS中设置需要显示的div的display属性为none,隐藏起来。
3. 使用:hover伪类选择器来触发鼠标悬停事件,并设置需要显示的div的display属性为block,让它显示出来。
示例代码如下:
HTML代码:
```html
<div class="box1"></div>
<div class="box2"></div>
```
CSS代码:
```css
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.box1:hover + .box2 {
display: block;
}
```
解释:
上面的代码中,box1是需要触发悬停事件的div,box2是需要显示出来的div。在CSS中,设置box2的display属性为none,让它一开始隐藏起来。然后使用:hover伪类选择器,选择box1元素,并使用+选择器来选取它后面的box2元素。当鼠标悬停在box1上时,box2的display属性会被设置为block,让它显示出来。
阅读全文