javascript - Selecting :after element not working in Jquery selector -
i creating tool tip component input box , text area code coming
<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>
the input type can text , checkbox or select box. in css have harcoded value of bottom. when use text tooptip covering entire input area , tring change bottom property of tooltip-text , :after element using jquery height of element using .
my css below
.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; }
i used below code change bottom property of tooltip-text , :after element
$("#descripcion").parent().hover(function(){$(this).attr('bottom','100px')}) ; $("#descripcion").parent().find('span').attr('bottom','100px')}) ;
but not woking. appreciated. how select after element
an attribute id
, style
, class
etc, see below
<div class="something"></div>
however, style not attribute, , not use attr()
method, css()
method
$("#descripcion").parent().hover(function(){ $(this).css('bottom','100px'); });
you can of course not access pseudo elements :after
jquery
Comments
Post a Comment