私のタイトルはあまり明確ではないかもしれませんが、私のサイトへのリンクを貼り付けます:
メニューの四角いボタンを見てください。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;
}