为 dom 元素添加带有条件的动态样式答案

【问题标题】：Adding dynamic styles with conditions to the dom elements为 dom 元素添加带有条件的动态样式
【发布时间】：2014-04-22 10:53:18
【问题描述】：

我正在动态生成 div，但我想要的是添加一个锚标记，该标记显示一个垃圾图像，用于在特定 div 悬停时删除该特定消息。我写了一个 :hover on class 来添加背景，效果很好，但我也想添加一个锚标签。这是我的代码::

风格

<style>
  .mail:hover {
        background-color: #cde6f7;
        /*background-image: url("/Content/images/Trash.png");*/
    }
.mail {
    float: left;
    width: 100%;
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
    margin-top: 3px;
    cursor: pointer;
}
</style>

在这里我正在创建动态 div，我想为我悬停的每个 div 添加背景颜色和垃圾图像图像

<script>
 success: function (data) {
                if (data.MessageData != null) {
                    var DataDiv = "";
                    for (var iRow = 0; iRow < data.MessageData.length; iRow++) {
                        var RowData = data.MessageData[iRow];
                        var date = new Date(parseInt(RowData.Sent_Date.substr(6)));
                        var style = '';
                        if (RowData.IsReceiver_Received == false) {
                            style = 'color:#0460C7' + '!important ';
                        }
                        DataDiv += "<div class='mail'  id='" + RowData.pkMessageId + "' onclick=ShowMessage('" + RowData.pkMessageId + "')>";
                        DataDiv += "<h3 style=" + style + ">" + RowData.Subject + "</h3>";

                        //<label class='label' style='color:red ! important;'> hi hi hi </label>

                        DataDiv += "<label style=" + style + "class='clsLbl'> From:" + RowData.Message_From + "</label>";
                        DataDiv += "<label style=" + style + "class='clsLb2'>" + date.toDateString() + "</label></div>";
                    }
                    $("#hdnSearchType").val(1);
                    $("#hdnUserType").val(1);
                }
                $("#MessageStore").html('');
                $("#MessageStore").html(DataDiv);

            },
</script>

【问题讨论】：

I want to add an anchor tag also 然后继续。有什么问题？
不，其实我想在 div 的悬停上添加锚标签。
this 可能有帮助

标签： javascript jquery html css dom

【解决方案1】：

  $(".mail").live('hover', function(e){
      $("#"+this.id).append("<a>addd</a>");               
  });

【讨论】：

【解决方案2】：

如果我正确理解您的问题，您需要这样做：

在动态创建 <div> 的 HTML 时，还要在 div 中添加：

DataDiv += "<a href='its-url' class='trash'></a>";
这将在您的动态元素中添加一个锚点。
因为你想保持隐藏，它只会在你将鼠标悬停在“邮件”div上时可见，
```
.trash { display: none; }
.mail:hover .trash { display: block; }
```
会为你工作。
然后您可以使用background-image 或<img src=""> 在此锚元素内显示垃圾桶图标。

【讨论】：