Question

我有一个位于两个按钮之一下方的css三角形，表示它下方的文本与该按钮相关联。当我将鼠标悬停在旁边的按钮上时，我想将该三角形移动到第二个按钮下方。

我的三角形是一个空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);
}

我的按钮有类别，＆＃34;报告和类＆＃34;。我尝试过的是：

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

和

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

我做错了什么？

Answer 1

像ralph.m提到的那样，你最好使用using :: 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;
}

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

1 个答案: