Question

悬停时，我收到一条关于“商品过期”的消息。现在，我按原样收到消息。由于使用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>

更新

Answer 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>

Answer 2

在标题“ offer Expired”即将到来的title元素上添加span或任何标签，并在该元素上创建CSS。如果您在span元素中添加了title列值，则使CSS像这样 span：hover：after { 红色 }

jQuery悬停时获取红色消息

2 个答案: