0

也许我的标题不是很清楚，但我只会将链接粘贴到我的网站：

http://kaohsiung.at/

请查看菜单中的方形按钮。如果我使用 Firefox，它会按预期工作。如果您将鼠标悬停在它们上方，它们会翻转，您可以看到菜单文本。

但如果我使用 chrome，那么只有最后一个按钮会翻转。

奇怪的是，直到最近它一直有效。但我无法弄清楚问题是什么。所以也许有人可以帮助我。我不会发布 html 和 css 代码，因为您可以使用 chrome 来检查它。

编辑：

好的，我将 css 和 html 减少到最低限度，这是链接：http: //jsfiddle.net/KVBQU/17/

html:

   <nav id="access" role="navigation">


<div class="menuentry">
        <div class="menuentrycontainer">
            <div class="menutext">
            <p>Home</p>
            </div>      
            <div class="menuimage">
                test
                </div>
        </div>
</div>

<div class="menuentry">
        <div class="menuentrycontainer">
            <div class="menutext">
            <p>Home</p>
            </div>      
           <div class="menuimage">
                test
                </div>
        </div>
    </div>

<div class="menuentry">
        <div class="menuentrycontainer">
            <div class="menutext">
            <p>Party</p>
            </div>      
            <div class="menuimage">
                test
                </div>
        </div>
        </div>

<div class="menuentry"> 
        <div class="menuentrycontainer">
        <div class="menutext">
        <p>Kunst</p>
        </div>      
        <div class="menuimage">
                test
                </div>
        </div>
    </div>

  <div id="clearfloatdiv"></div>        

</nav><!-- #access -->

CSS：

#access {
    position: relative;
    display: block;
    height: auto;
    max-width: 1024px;
    width: 100%;
    min-width: 320px;
    z-index: 1000000
    }

.menuentry {
    display: inline-block;
    float: left;
    border: 0;
    height: 0;
    width: 8.33%;
    padding-top: 8.33%;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }

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

.menutext {
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    background-color: rgb(124, 172, 231);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    letter-spacing: -1px;
    -moz-transform: rotatey(270deg);
    -ms-transform: rotatey(270deg);
    -o-transform: rotatey(270deg);
    -webkit-transform: rotatey(270deg);
    transform: rotatey(270deg);
    border: solid white 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }

.menutext p {
    padding-top: 15px
    }

.menuimage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(124, 172, 231);
    -moz-transition: -moz-transform 200ms ease-out 200ms;
    -o-transition: -o-transform 200ms ease-out 200ms;
    -webkit-transition: -webkit-transform 200ms ease-out 200ms;
    transition: transform 200ms ease-out 200ms;
    -moz-transition: -moz-transform 200ms ease-out 200ms;
    -o-transition: -o-transform 200ms ease-out 200ms;
    -webkit-transition: -webkit-transform 200ms ease-out 200ms;
    transition: transform 200ms ease-out 200ms;
    -moz-transition: -moz-transform 200ms ease-out 200ms;
    -o-transition: -o-transform 200ms ease-out 200ms;
    -webkit-transition: -webkit-transform 200ms ease-out 200ms;
    transition: transform 200ms ease-out 200ms;
    border: solid green 2px
    }

.menutext {
    -moz-transition: -moz-transform 200ms ease-out;
    -o-transition: -o-transform 200ms ease-out;
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    -moz-transition: -moz-transform 200ms ease-out;
    -o-transition: -o-transform 200ms ease-out;
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    -moz-transition: -moz-transform 200ms ease-out;
    -o-transition: -o-transform 200ms ease-out;
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out
    }

.menuentrycontainer:hover .menuimage {
    -moz-transform: rotatey(90deg);
    -ms-transform: rotatey(90deg);
    -o-transform: rotatey(90deg);
    -webkit-transform: rotatey(90deg);
    transform: rotatey(90deg);
    -moz-transition: -moz-transform 200ms ease-in;
    -o-transition: -o-transform 200ms ease-in;
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    -moz-transition: -moz-transform 200ms ease-in;
    -o-transition: -o-transform 200ms ease-in;
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    -moz-transition: -moz-transform 200ms ease-in;
    -o-transition: -o-transform 200ms ease-in;
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in
    }

.menuentrycontainer:hover .menutext {
    -moz-transform: rotatey(360deg);
    -ms-transform: rotatey(360deg);
    -o-transform: rotatey(360deg);
    -webkit-transform: rotatey(360deg);
    transform: rotatey(360deg);
    -moz-transition: -moz-transform 200ms ease-in 200ms;
    -o-transition: -o-transform 200ms ease-in 200ms;
    -webkit-transition: -webkit-transform 200ms ease-in 200ms;
    transition: transform 200ms ease-in 200ms;
    -moz-transition: -moz-transform 200ms ease-in 200ms;
    -o-transition: -o-transform 200ms ease-in 200ms;
    -webkit-transition: -webkit-transform 200ms ease-in 200ms;
    transition: transform 200ms ease-in 200ms;
    -moz-transition: -moz-transform 200ms ease-in 200ms;
    -o-transition: -o-transform 200ms ease-in 200ms;
    -webkit-transition: -webkit-transform 200ms ease-in 200ms;
    transition: transform 200ms ease-in 200ms
    }

#clearfloatdiv {
    clear: both;
}
4

0 回答 0