ie11 css rotate - 背景元素不可点击

时间:2017-07-30 23:07:45

标签: javascript jquery html css internet-explorer

我正在创建一个标签界面,其中活动标签有一个旋转变换,允许预览下一个标签。单击预览区域中的按钮将打开下一个选项卡。

除了IE11之外,这在所有浏览器中都运行良好。请参阅下面的代码段。



$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})

* {
  margin: 0;
  padding: 0
}

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container .tab-2 button {
  position: absolute;
  bottom: 37%;
  right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content"></div>
  </div>

  <div class="tab tab-2">
    <div class="content">
      <button type="button">
        Click me
      </button>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

我认为问题是虽然IE可见地执行旋转,但原始边界区域本身不会旋转,因此点击不会应​​用于背景元素。

有人知道如何解决这个问题吗? jsfiddle:https://jsfiddle.net/bmq2e2ae/1/

4 个答案:

答案 0 :(得分:7)

要在IE中使用此功能,您可以为pointer-events: none添加.tab .content,并将pointer-events恢复为.tab .content的子项的初始状态。

演示:

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})
* {
  margin: 0;
  padding: 0
}

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container .tab-2 button {
  position: absolute;
  bottom: 37%;
  right: 20px;
}

/* IE Hack: disable pointer-events */
.container .tab .content {
  pointer-events: none;
}

/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
  pointer-events: initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content"></div>
  </div>

  <div class="tab tab-2">
    <div class="content">
      <button type="button">
        Click me
      </button>
    </div>
  </div>
</div>

此外,您将此hack包装在媒体查询浏览器中,仅在IE中进行评估

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  /* IE Hack: disable pointer-events */
  .container .tab .content {
    pointer-events: none;
  }

  /* IE Hack: enable pointer-events for descendants */
  .container .tab .content > * {
    pointer-events: initial;
  }
}

答案 1 :(得分:4)

当您使用CSS3 TRANSFORMS时,您需要为不同的浏览器使用不同的标签。

您需要使用如下所述。

-webkit-transform: rotate(-25deg) translateX(-50%);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(-25deg) translateX(-50%);
-moz-transform-origin: 50% 0%;
-o-transform: rotate(-25deg) translateX(-50%);
-o-transform-origin: 50% 0%;
-ms-transform: rotate(-25deg) translateX(-50%);
-ms-transform-origin: 50% 0%;
transform: rotate(-25deg) translateX(-50%);
transform-origin: 50% 0%;

这将在下面提到的浏览器版本中起作用和支持。

  

Chrome:4.0+

     

Firefox:3.5+

     

Safari:3.1+

     

IE:9.0+

     

Opera:10.5 +

需求中的第一个示例:您可以只旋转第二个div而不是旋转两个div,它将起作用。请检查以下解决方案。

$(document).ready(function() {
    $('button').click(function() {
        alert('Button was clicked');
    });
});
* {
    margin: 0;
    padding: 0
}

.container {
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.container .tab {

    width: 185%;
    height: 140%;
    overflow: hidden;
}

.container .tab .content {
    position: relative;
    height: 100%;
    width: 100%;
}

.container .tab-1 {
    z-index: 2;
    width: 100%;
}

.container .tab-1 .content {
    background-color: red;
}

.container .tab-2 {
    z-index: 3;
    transform: translateX(-40%) rotate(-25deg);
    transform-origin: 50% 0;
}

.container .tab-2 .content {
    background-color: green;
}

.container .tab-2 button {
    position: absolute;
    right: 60px;
    top:20px;
    transform: translateX(50%) rotate(25deg);
    transform-origin: 50% 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="tab tab-1">
        <div class="content">

        </div>
    </div>

    <div class="tab tab-2">
        <div class="content">
            <button type="button">
                Click me
            </button>
        </div>
    </div>
</div>

需求中的第二个示例。:在一个div中,您可以实现此目的。请检查下面。

$(document).ready(function() {
    $('button').click(function() {
        alert('Button was clicked');
    });
});
* {
    margin: 0;
    padding: 0
}

.container {
    position: relative;
    overflow: hidden;
}
.container .tab{
    z-index: 2;
    margin-bottom:10px;
    position: relative;
    display: block;
    width: 400px;
    height: 200px;
    background-color: red;
    overflow: hidden;
    
}

.container .content {
    z-index: 62;
    width: 200px;
    height: 120px;
    background-color: green;
    position: absolute;
    bottom: -72px;
    right: -35px;
    transform: rotate(-25deg) ;
    -webkit-transform: rotate(-25deg) ;
    -moz-transform: rotate(-25deg) ;
    -o-transform: rotate(-25deg) ;
    -ms-transform: rotate(-25deg) ;
}
.container button{
  border:1px solid #eee;
}
.container a {
  color:#FFF;
}

.container button,
.container a {
    position: absolute;
    display: block;
    margin-right: 30px;
    right: 15px;
    bottom: 80px;
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    cursor: pointer;
}
<!doctype html>
<html>
    <head>
        <title>IE10/11 Media Query Test</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
      <div class="container">
          <div class="tab tab-1">
          Tab With Link 
              <div class="content">
                  <a  href="https://www.google.co.in">Link</a>
              </div>
          </div>

          <div class="tab tab-2">
          Tab With Button 
              <div class="content">
                  <button id="check_btn" type="button">Click me</button>
              </div>
          </div>

          <div class="tab tab-3">
          Tab Without Link or Button
              <div class="content">
              </div>
          </div>

          <div class="tab tab-4">
              Only Tab with no Green Area
          </div>
      </div>
    </body>
</html>

这会对你有所帮助。如果它不适合你,请告诉我。

答案 2 :(得分:3)

按钮的父元素.tab-2的{​​{1}}设置低于另一个z-index.tab-1。因此,在IE .tab-1覆盖所有内容时,即使没有可见性也会尝试点击。

button元素中取出.tab-2 .content元素,然后放在容器内。然后设置position:absolute和更高z-index,然后设置.container .tab-2.container .tab-1。重新定位。

注意:由于元素高度,您必须滚动下面的示例才能看到按钮。

<强> JSFiddle Demo

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})
* {
  margin: 0;
  padding: 0
}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container button {
  position: absolute;
  bottom: 5%;
  right: 10px;
  z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content">Tab 1</div>
  </div>
  <div class="tab tab-2">
    <div class="content">Tab 2</div>
  </div>
  <button type="button">Click me</button>
</div>

答案 3 :(得分:3)

您可以旋转第二个标签(带按钮的标签),而不是旋转第一个标签。它允许将第二个选项卡保留在第一个选项卡的顶部。您可以在this jsfiddle中看到结果。

&#13;
&#13;
$(document).ready(function() {
    $('button').click(function(e) {
    	e.stopPropagation();
        alert('Button was clicked');
    });
    $('.tab-1').click(function() {
        alert('Tab1 was clicked');
    });
    $('.tab-2').click(function() {
        alert('Tab2 was clicked');
    });
})
&#13;
* {
    margin: 0;
    padding: 0
}

.container {
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.container .tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container .tab .content {
    position: relative;
    height: 100%;
    background-color: red;
}

.container .tab-2 {
    transform: translateX(63%) translateY(100%) rotate(-25deg);
    transform-origin: 0% 0%;
    overflow: hidden;
}

.container .tab-2 .content {
    background-color: green;
    transform: rotate(25deg) translateX(-63%) translateY(-100%);
    transform-origin: 0% 0%;
}

.container .tab-2 button {
    position: absolute;
    bottom: 4%;
    right: 3%;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="tab tab-1">
        <div class="content">
            Tab 1
        </div>
    </div>
    <div class="tab tab-2">
        <div class="content">
            Tab 2
            <button type="button">
                Click me
            </button>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;