Question

我正在为所有输入框和文本区创建工具提示组件，我的代码就像

<div class="tooltip is-text-area show">
        <textarea id="descripcion" name="descripcion" class="my-textarea" style="text-transform: uppercase;"></textarea>
        <span class="tooltip-text" style="height: 14px;">Contect of tooltip</span>:after
    </div>

输入类型可以是文本，复选框或选择框。在css我已经扼杀了底部的价值。但是当我使用文本时，这个tooptip覆盖整个输入区域，所以我想改变tooltip-text的底部属性，并且：在使用jquery之后元素到我正在使用的元素的高度。

我的CSS位于

之下

.tooltip {
  position: relative;
}
.tooltip .tooltip-text {
  position: absolute;
  **bottom: 26px;**
  left: 0;
  background: #F47826;
  padding: 2px 5px;
  box-sizing: border-box;
  width: 100%;
  max-width: 160px;
  font-size: 10px;
  color: #fff;
  z-index: 1;
  display: none;
}
.tooltip.show .tooltip-text {
  display: block;
}
.tooltip.show:after {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  **bottom: 21px;**
  left: 11px;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #F47826;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  font-size: 0;
  line-height: 0;
}

我使用下面的代码来更改工具提示文本的底部属性，并且：在元素

之后

$("#descripcion").parent().hover(function(){$(this).attr('bottom','100px')}) ;
$("#descripcion").parent().find('span').attr('bottom','100px')}) ;

但它并不是在开玩笑。任何帮助将不胜感激。如何选择after元素

Answer 1

属性类似id，style，class等，见下文

<div class="something"></div>

但是，样式不是属性，并且不使用attr()方法，而是使用css()方法

$("#descripcion").parent().hover(function(){
    $(this).css('bottom','100px');
});

您当然不能使用jQuery

访问:after之类的伪元素

选择：元素在Jquery选择器中不起作用

1 个答案: