文章/答案/技术大牛

发布

社区首页 >问答首页 >Div使用css在悬停后滑动。

问Div使用css在悬停后滑动。
EN

Stack Overflow用户

提问于 2017-08-04 08:14:06

回答 4查看 99关注 0票数 3

我创造了这个盒子，当我在盒子上盘旋时，那个盒子滑到了我不想要的右边。我需要当用户悬停在盒子上，然后显示边框，不滑动。

你能帮我解决这个问题吗？

.wid-30{width: 30%;}
.bg{background-color: red;}
.wid-30:hover{border-left: 10px solid yellow;}
.padding{padding: 10px;}

<div class="wid-30 bg padding">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-08-04 08:17:13

当元素被padding-left: 0编辑时，您可以简单地设置:hover，这样它就不会移动。下面是一个例子：

.wid-30 {
  width: 30%;
}

.bg {
  background-color: red;
}

.wid-30:hover {
  border-left: 10px solid yellow;
  padding-left: 0;
}

.padding {
  padding: 10px;
}

<div class="wid-30 bg padding">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

票数 1

Stack Overflow用户

发布于 2017-08-04 08:17:21

您需要在border-left: 10px solid red;中添加.bg

.wid-30 {
  width: 30%;
}

.bg {
  background-color: red;
  border-left: 10px solid red;
}

.wid-30:hover {
  border-left: 10px solid yellow;
}

.padding {
  padding: 10px;
}

<div class="wid-30 bg padding">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

票数 3

Stack Overflow用户

发布于 2017-08-04 08:21:23

尝尝这个。如果设置了框大小属性，则红色div中的dimensione不会更改。如果在悬停时移除填充，则会阻止p转换。

.wid-30 {
  width: 30%;
  box-sizing: border-box
}

.bg {
  background-color: red;
}

.wid-30:hover {
  border-left: 10px solid yellow;
  padding-left: 0;
}

.padding {
  padding: 10px;
}

<div class="wid-30 bg padding">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45501570

复制

相似问题

问Div使用css在悬停后滑动。
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Div使用css在悬停后滑动。EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Div使用css在悬停后滑动。
EN