Question

当鼠标移动到图标时我使用弹出窗口，当文本设置为静态时，它正常工作，但我需要文本（我的情况：data-title）设置id javascript。我怎么能这样做？

附：我尝试使用data-title-id，但没有给我任何价值。

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;
}

Answer 1

CSS中data-*属性名称错误。它应该是content: attr(data-title-id);。

另请注意“In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.”和in CSS 2.1 the attr() function is limited to the content property.

Answer 2

假设您的选择器正确，您的HTML应该看起来something like this：

<div class="photo4" data-title-id="time2" data-title="YOUR TITLE HERE">
    <img src="{{ STATIC_URL }}images/time.png" width="22" height="22px" />
</div>

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

设置为css attr字段数据标题的问题，来自javascript的id

2 个答案: