html - problems with setting to css attr field data-title, the id from javascript -
i use popup when take mouse icon, , it's working fine when text set static, need text (my case: data-title) set id javascript. how can this?
p.s. i'm try use data-title-id, there don't give me values.
html:
<div style="width:10px; float:left; padding-top:20px;"> <div class="photo4" data-title-id="time2"><img src="{{ static_url }}images/time.png" width="22" height="22px"></div> </div></div> css:
.photo4 { display: inline-block; position: relative; } .photo4:hover:after { display: block; content: attr(data-title); position: absolute; left: 120%; bottom: -250%; z-index: 1; background: #003399; font-family: segoe ui; font-weight: lighter; font-size: 13px; padding: 5px 10px; color: #fff; border: 1px solid #333; -moz-border-radius: 5px -webkit-border-radius: 5px; border-radius: 5px 5px 5px 5px; }
the data-* attribute named wrong in css. should content: attr(data-title-id);.
also note “in css 2.1, not possible refer attribute values other elements subject of selector.” , in css 2.1 attr() function limited content property.
Comments
Post a Comment