0

私のタイトルはあまり明確ではないかもしれませんが、私のサイトへのリンクを貼り付けます:

http://kaohsiung.at/

メニューの四角いボタンを見てください。Firefox を使用すると、意図したとおりに動作します。それらの上にカーソルを置くと、それらが反転し、メニュー テキストが表示されます。

しかし、クロムを使用すると、最後のボタンだけが反転します。

奇妙なことに、最近までずっと機能していました。しかし、私は問題が何であるかを理解できません。だから多分誰かが私を助けることができます。chromeを使用して検査できるため、htmlおよびcssコードは投稿しません。

編集:

わかりました、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