Question

我正在研究酒店监控项目。我有一个动态填充的表，其单元格代表一个房间及其状态。基于此状态，单元格的背景颜色设置为内联。我使用Jquery在鼠标悬停时放大每个单元格并成功完成。但我的悬浮细胞是透明的。有什么办法可以获得动态填充单元格的背景颜色。我使用'for'循环来迭代并填充表并设置背景颜色。

          foreach ($member as $result) {                    
                    $room = $result->ID;

                    if($result->Status === "staff"){
                        $color = "#008000";                                
                    }elseif ($result->Status === "guest"){
                        $color = "#FF0000";
                    }else{
                         $color = "#0066FF";
                    }
<td style="background-color:<?php echo $color ?>">
 <div class="outer-box" style="background-color:<?php echo $color ?>">
   <div class="box">
    <a href="<?php echo base_url()?>roomdetails_controller/roomdetails_function/<?php echo $room;?>"<?php echo "<p>ROOM:".$result->ID."</p>"; ?></a>
     <br>
     <div class="image-box">
       <img src="<?php echo $DND_Image;?>" alt="DND" style="width:27px;height:27px;"/>
     </div>
     <div class="image-box">
       <img src="<?php echo $CMR_Image;?>" alt="laundry" style="width:27px;height:27px;"/>
     </div>
     <div class="image-box">
       <img src="<?php echo $IRD_Image;?>" alt="makeupmyroom" style="width:27px;height:27px;"/>
     </div>
    </div>
  </div>
</td>

我试过$（this）.attr（'background-color'）;在'box'div，但没有成功。任何帮助将不胜感激

Answer 1

您必须使用on将事件绑定到动态创建的元素。

前：

$('you table cell id').on('mouseover',function(){
   //get color of the hovered element.
})

这甚至会触发动态元素。

Answer 2

试

    $(this).css("background-color", "red");

Answer 3

像这样，

$('#yourTableId td').on('mouseover',function(){
   var bgColor =$(this).css("background-color");
})

Answer 4

选中此fiddle

$(".image-box").live("mouseover",function(){
    console.log($(this).css("backgroundColor"));
})

使用$().css

如果您使用1.9 jquery及以上，请使用.on代替.live

Answer 5

非常简单

$("td").on("mouseover", function () {
 alert( $(this).css("background-color");
});

Answer 6

我从https://teamtreehouse.com/forum/change-background-of-parent-div-when-hover-on-child-div-using-jquery找到了答案。

当我徘徊在＆＃39;盒子上时div，parent（）让我得到了我想要的元素。

使用JQuery

6 个答案: