css - 用另一个元素的悬停状态改变一个元素的位置

Question

我在两个按钮之一下方放置了一个 css 三 Angular 形，指示其下方的文本与该按钮相关联。当我将鼠标悬停在它旁边的按钮上时，我想将该三 Angular 形移动到第二个按钮下方。

我的三 Angular 形是一个具有以下样式的空 div:

.nubbin {
  width: 0;
  height: 0;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-bottom: 2em solid #435C6E;
  margin-left: calc(50% - 10em);
}

我的按钮有类，“报告和类”。我试过的是:

.chat:hover~.nubbing {
  margin-left: calc(50% + 10em);
} 

和

.chat:hover+.nubbing {
  margin-left: calc(50% + 10em);
} 

我做错了什么？

Answer 1

就像 ralph.m 提到的，你最好使用::after 伪元素。

看看这个例子: http://jsfiddle.net/scottmey/PhZ7x/2/

希望这能为您指明正确的方向。

.comment {
    position: relative;
    display: inline-block;
    width: 620px;
    vertical-align: top;
    padding: 3px 10px;
    background: #435C6E;
    margin-bottom: 15px;
    margin-left: 10px;
}

.comment:hover:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -15px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #435C6E;
    display: block;
    width: 0;
    z-index: 1;
}