Question

当鼠标悬停在节名称（例如：.test3）上时，使用转换：scale（1.1）;什么工作正常，直到鼠标从它移动。顺便说一下它是页面的比例，之前会隐藏内容。但是当鼠标从它移出时，然后在一个地方显示所有（h1和p，位置：固定;）。它是在最新的浏览器中工作，但在IE 11中显示h1和p标签在同一个地方所以需要首先悬停在一个部分中以便可读并且只显示该部分悬停的部分。怎么解决这个问题？有些z-index选项可能会？尝试很多东西，但没有。请帮忙！

CSS：

*,*::before,*::after
{
    box-sizing: inherit;
}

*
{
    position: relative;
}

a,body,footer,header,h1,h2,html,img,li,p,section,span,sup,ul
{
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

ul
{
    list-style: none;
}

.test1:hover,.test2:hover,.test3:hover,.test4:hover,.test5:hover,.test6:hover
{
    -webkit-filter: grayscale(10%);
    -webkit-transform: scale(1.1);
    filter: grayscale(10%);
    transform: scale(1.1);
    z-index: 1;
}

html
{
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    direction: ltr;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 233%;
}

body
{
    background: #FFFFFF 50% 50%/cover no-repeat padding-box border-box fixed;
    color: #FFFFFF;
    font: normal normal normal 0.938em/175% "Work Sans";
    height: 100%;
    margin: auto;
    min-width: 0;
    overflow: hidden;
    width: 233%;
}

section
{
    display: inline-block;
    float: left;
    height: 100%;
    width: 100%;
}

.test1,.test2,.test3,.test4,.test5,.test6
{
    -webkit-filter: grayscale(90%);
    -webkit-transition: all 2.5s ease-out 0s;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(90%);
    min-height: 100vh;
    overflow: hidden;
    transition: all 2.5s ease-out 0s;
    width: 16.66%;
}

h1
{
    -webkit-transition: all 1s ease 0s;
    -webkit-user-select: none;
    bottom: 0;
    color: red;
    font-size: 2em;
    left: 0;
    line-height: 100%;
    right: 0;
    text-align: center;
    top: 40%;
    transition: all 1s ease 0s;
    user-select: none;
    position: fixed;
}

p
{
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    position: fixed;
}

HTML：

<body>
<section class="test1" style="background-image: url('http://www.planwallpaper.com/static/images/cool-background.jpg');">
<ul>
<li><h1>test1</h1>
<li>
<p>test</p>
</li>
</ul>
</section>
<section class="test2" style="background-image: url('http://www.planwallpaper.com/static/images/cool-background.jpg');">
<ul>
<li><h1>test2</h1>
<li>
<p>testtest</p>
</li>
</ul>
</section>
<section class="test3" style="background-image: url('http://www.planwallpaper.com/static/images/cool-background.jpg');">
<ul>
<li><h1>test3</h1>
<li>
<p>testtesttest</p>
</li>
</ul>
</section>
<section class="test4" style="background-image: url('http://www.planwallpaper.com/static/images/cool-background.jpg');">
<ul>
<li><h1>test4</h1>
<li>
<p>testtesttesttest</p>
</li>
</ul>
</section>
<section class="test5" style="background-image: url('http://www.planwallpaper.com/static/images/cool-background.jpg');">
<ul>
<li><h1>test5</h1>
<li>
<p>testtesttesttesttest</p>
</li>
</ul>
</section>
<section class="test6" style="background-image: url('http://www.planwallpaper.com/static/images/cool-background.jpg');">
<ul>
<li><h1>test6</h1>
<li>
<p>testtesttesttesttesttest</p>
</li>
</ul>
</section>
</body>
</html>

带有IE11的Windows 10：

Overflow all six section in same place.

有什么想法吗？

Answer 1

我不确定你要做什么，但你不应该做所有的样式和身体或html标签中的东西。你所做的很多事情都没有任何意义......阅读一些Css和Html的东西，这肯定会有所帮助。但是我试图从你的代码中获得一些有用的东西。我想你的意思是悬停上的文字都在同一个地方等。你在文本上使用了固定位置，不能正常工作并将所有文本放在完全相同的位置，我将其更改为相对并修复了其他一些东西

更新：

我想我理解你的意思，你只想在悬停时显示文字

悬停时更新了节目：

https://jsfiddle.net/1t4ch8Lb/8/

.test1,
.test2,
.test3,
.test4,
.test5,
.test6 {
  -webkit-filter: grayscale(90%);
  -webkit-transition: all 2.5s ease-out 0s;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(90%);
  min-height: 100vh;
  transition: all 2.5s ease-out 0s;
  width: 16.66%;
}

.test1:hover,
.test2:hover,
.test3:hover,
.test4:hover,
.test5:hover,
.test6:hover {
  -webkit-filter: grayscale(10%);
  -webkit-transform: scale(1.1);
  filter: grayscale(10%);
  transform: scale(1.1);
  display: block;
}

section {
  display: inline-block;
  float: left;
  height: 100%;
  width: 100%;
}

h1 {
  -webkit-transition: all 1s ease 0s;
  -webkit-user-select: none;
  color: red;
  font-size: 2em;
  transition: all 1s ease 0s;
}

ul {
  position: relative;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: auto;
  // display: none;
}

section:hover ul {
  display: block;
}

h1和p标签固定的部分和z-index显示溢出

1 个答案: