我的日历控件中的CSS z-index问题

时间:2015-11-06 04:13:25

标签: javascript jquery html css

我正面临一个css z-index问题。它是鼠标悬停红色区域上的日历控件显示事件弹出窗口。

请参阅附件中的图片。

enter image description here

https://jsfiddle.net/ea75jvdf/

当我在日期5上鼠标悬停时,它显示弹出窗口,但其他日期的红色div显示在前面。

红色图标的CSS

.add-gun {
float: left;
margin-left: 5px;
margin-top: 8px;
cursor: pointer;
background-color: red;
background-repeat: no-repeat;
height: 30px;
width: 30px;
}

2 个答案:

答案 0 :(得分:2)

您应该在此选择器中添加z-index属性:

.responsive-calendar .days .day:hover {
    background-color: #d0d0d0;
    z-index: 10;

答案 1 :(得分:2)

似乎是变换:rotateY(0deg);在你的div.day上造成它。如果你删除它然后按预期工作。

请参阅:https://jsfiddle.net/51L7eac4/1/

我很快就将其删除以将其删除

applyTransform: function($el, transform) {
        //$el.css('transform', transform);
        //$el.css('-ms-transform', transform);
        //$el.css('-moz-transform', transform);
        //return $el.css('-webkit-transform', transform);
        return $el;
      },

现在我不知道在某些你不想删除它的情况下这是否有用。这是我在Inspect Element中玩的第一件事。