如何在css中找到指向的div元素

我需要帮助来设计我的div元素作为我的工具提示。以下是我的css脚本，其中有一个设计，其中指向箭头位于div的左侧。我如何转移右侧div的指向箭头？谢谢...如何在css中找到指向的div元素

<div id="tooltip" style="display:none" class="balloon"> 
<div class="arrow"></div> 
    Content of my tooltip 

</div>

CSS：

.balloon 
    { 
    background: #ccc; 
    height:80px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    position:absolute; 
    padding: 20px; 

    font-size: 12px; 
    width: 300px; 
    text-align: justify; 
    color: #3a3a3a; 

    z-index: 200; right: 0; top: 360px; left: 600px 
    } 

    .balloon .arrow 
    { 
    border-color: transparent #CCCCCC transparent transparent; 
    border-style: solid; 
    border-width: 10px; 
    display: block; 
    height: 0; 
    left: -20px; 
    position: absolute; 
    top: 20px; 
    width: 0; 
    }

来源

2014-10-17 timmack

试试这个： - DEMO

.balloon { 
 
    background: #ccc; 
 
    height:80px; 
 
    border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    position:absolute; 
 
    padding: 20px; 
 
    font-size: 12px; 
 
    width: 300px; 
 
    text-align: justify; 
 
    color: #3a3a3a; 
 
    z-index: 200; 
 
    right: 0; 
 
    top: 50px; 
 
    left: 50px 
 
} 
 
.balloon .arrow { 
 
    border-color: transparent transparent transparent #CCCCCC; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    display: block; 
 
    height: 0; 
 
    right: -20px; 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 0; 
 
}

<div id="tooltip" class="balloon"> 
 
    <div class="arrow"></div> 
 
    Content of my tooltip 
 
</div>

由于@misterManSam在他的评论中提出，你也可以将它改为伪箭头元素。

的jsfiddle - DEMO

来源

2014-10-17 03:02:04 Anonymous

使它成为伪箭头元素，而不是MOAR真棒？ '.balloon：after {content：''; border-color：透明透明透明#CCCCCC; border-style：solid; border-width：10px; display：block; 身高：0; right：-20px; position：absolute; top：20px; 宽度：0; }' – misterManSam 2014-10-17 03:05:57

@Mary当你使它变成伪箭？它与我们所做的第一个有什么不同？任何相关性？ – timmack 2014-10-17 03:23:01

@timmack在这个演示中，我没有使用额外的div来制作箭头，而是使用了'：after'伪元素。 – Anonymous 2014-10-17 03:27:53

在你.balloon .arrow CSS规则，改变left:-20px;到right:-20px;。然后它会看起来像@ MaryMelody的Demo JSFiddle。

来源

2014-10-17 03:02:35

如何在css中找到指向的div元素

回答

相关问题