创建一个向下箭头指针 [英] Create a down arrow pointer

问题描述

如何在css中为 parent 创建一个向下箭头，以便它看起来像一个讲话泡泡？

这是我试过的。

 < div class =parent> TEST 
& =tri> TEST< / span> 
< / div> 
 
 .tri {
 opacity：0; 
} 
 .tri：before {
 position：absolute; 
 top：40％; 
 left：50％; 
 margin-top：-15px; 
 margin-left：-100px; 
 background-color：#FFF; 
 color：＃000; 
 text-align：center; 
 padding：10px; 
 min-width：200px; 
} 
 
 .tri：after {
 border-top：5px solid＃000; 
 border-top：5px solid＃000; 
 border-right：5px solid transparent; 
 border-left：5px solid transparent; 
} 
 
 .parent：hover .tri：before，.parent：hover .tri：after {
 opacity：1; 
} 
  

小提琴

解决方案

>

• content：'';对于伪




• 显示父伪

    before，
   
  ：after {
   content：''; 
   
  } 
   
   .parent：hover .tri，
   
   .parent：hover .tri：before，
   
  。 parent：hover .tri：after {
   
   opacity：1; 
   
  } 
    

 ：before，：after {content：'';} parent：hover .tri，.parent：hover .tri：before，.parent：hover .tri：after {opacity：1;}。tri {opacity：0;}。tri：before {position：absolute; top：40％;左：50％; margin-top：-15px; margin-left：-100px; background-color：#FFF; color：＃000; text-align：center; padding：10px; min-width：200px;}。tri：after {border-top：5px solid＃000; border-top：5px solid＃000; border-right：5px solid transparent; border-left：5px solid transparent;}  

 < div class =parent> TEST< span class =tri> TEST< / span>< / div>  
 
 
 
  https://fiddle.jshell.net / 0h05kbsd / 3 /  
 
 
 
您还可以使用unicode字符如 \25bc ：
 
 
 
 
 
 
  a：hover：after {content：'\25bc';}  
 
 < a href>链接到悬停以显示向下箭头 
 
 
 
 
 
 
 unicode资源等： http://unicode-table.com/en/sets/arrows -symbols /  
 
How can I create a down arrow for parent in css so it would look like a speech bubble?

This is what I tried.
<div class="parent">TEST
   <span class="tri">TEST</span>
</div>

.tri {
  opacity: 0;
 }
 .tri:before {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15px;
  margin-left: -100px;
  background-color: #FFF;
  color: #000;
  text-align: center;
  padding: 10px;
  min-width: 200px;
}

.tri:after {
  border-top:  5px solid #000;
  border-top:  5px solid #000;
  border-right:  5px solid transparent;
  border-left:  5px solid transparent;
}

.parent:hover .tri:before, .parent:hover .tri:after {
  opacity: 1;
}
Fiddle
解决方案
You are missing 2 things here :


content:''; for the pseudos
show the parent pseudo
:before,

:after {
  content: '';

}

.parent:hover .tri,

.parent:hover .tri:before,

.parent:hover .tri:after {

  opacity: 1;

}





:before,
:after {
  content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
  opacity: 1;
}
.tri {
  opacity: 0;
}
.tri:before {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15px;
  margin-left: -100px;
  background-color: #FFF;
  color: #000;
  text-align: center;
  padding: 10px;
  min-width: 200px;
}
.tri:after {
  border-top: 5px solid #000;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

<div class="parent">TEST
  <span class="tri">TEST</span>
</div>





https://fiddle.jshell.net/0h05kbsd/3/

you could also spare some code using an unicode character like \25bc:



a:hover:after {
  content:'\25bc';
}

<a href> link to hover to show a down-arrow</a>





unicode ressource among others : http://unicode-table.com/en/sets/arrows-symbols/

                        
这篇关于创建一个向下箭头指针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！