悬停时Jquery以红色获取消息答案

【问题标题】：Jquery get message in red color when hover悬停时Jquery以红色获取消息
【发布时间】：2019-02-25 11:15:02
【问题描述】：

我在悬停时收到一条关于已过期优惠的消息，显示为“优惠已过期”。现在我得到了消息。由于我使用的 if 条件，我不希望在每个表格行中都显示消息。

我需要以红色显示消息。我该怎么做？

jquery

<script>

var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var currentDate = d.getFullYear()  + '-' + (month<10 ? '0' : '') + month + '-' + (day<10 ? '0' : '') + day;

$('tr:not(:first)').hover(    
function() {  
    var enddate = $(this).find('.enddate').text();
    if(currentDate > enddate) {
        $(this).prop('title', "Offer Expired"); 
    }
} ); 
</script>

查看

                 <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">Title</th>
                              <th scope="col">Start Date</th>
                              <th scope="col">End Date</th>
                              <th scope="col">Description</th>
                              <th scope="col">Edit</th>
                              <!-- <th scope="col"></th> -->
                            </tr>
                          </thead>
                          <tbody>
                            <?php foreach($offerList as $info){ ?>
                            <tr>
                                <td><a href="<?php echo base_url()."offer/publicview/?id=".urlencode($this->encrypt->encode($info->offid)); ?> " ><?php echo $info->title; ?></a></td>
                                <td><?php echo $info->startdate; ?></td>
                                <td class="enddate"><?php echo $info->enddate; ?></td>
                                <!-- <td><?php echo $info->enddate; ?></td> -->
                                <td><?php echo $info->discrip; ?></td>
                                <td>
                                    <a href="<?php echo base_url()."offer/edit/?id=".urlencode($this->encrypt->encode($info->offid)); ?>">Edit</a>                                              
                                </td>

                            </tr>
                            <?php } ?>
                          </tbody>
                        </table>

更新

【问题讨论】：

您不能更改标题属性的颜色，这是由浏览器决定的。有一些插件，如 bootstraps popover 或类似的插件可以完成这项工作，甚至是 css 驱动的方法，它们会产生与标题 attr 相似的结果。
How to change the style of the title attribute inside an anchor tag?的可能重复
jsfiddle.net/vntj13ws/1 这会有帮助吗？
@samuellawrentz 是否可以在 if 条件下使用它？

标签： jquery codeigniter colors hover

【解决方案1】：

是的，您可以动态更改title 属性并生成所需的标题。请看下面的小提琴。例如，我使用value 属性。你可以在那里插入你的逻辑。

var date = 100;
$('a').each(function(){
if($(this).attr('value') > date)
$(this).prop('title', 'Order Expired');
});

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}
a[title]:hover:after {
  content: attr(title);
  color: white;
  background: red;
  position: absolute;
  top: -100%;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Hello world!" value = 90>
  Hover over me
</a>
<br>
<a  title="Hello world!" value = 110>
  Hover over me
</a>

【讨论】：

您好，非常感谢。但是悬停时消息以两种方式显示。有什么办法可以去掉吗？
我已经从 Jquery 中删除了 .hover 并编辑了答案。这是你想要的吗？
我已经更新了我上面的图片。我想我必须使用 bootstrap popover 或其他方法。

【解决方案2】：

在标题“offer Expired”即将到来的标题元素中添加 span 或任何标签，并在该元素上创建 css。如果您在 span 元素中添加了标题列值，则像这样制作 css 跨度：悬停：{之后红色 }

【讨论】：