0

私はこの答えを探してみましたが、それを探しても明らかな答えを見逃していないことを願っています. 私はウェブサイト www.silenticonstudio.com を持っています。アドレスを転送する前は、そのホスト サイトを使用していましたが、移行は Chrome で機能していました。転送されると、機能しなくなりました。Firefox、IE では動作しますが、Android ブラウザでは動作しません。私の電話のクロムでは動作しますが、IE モバイルでは動作しません。誰にも答えがありますか？私は何が欠けていますか？大変感謝しております。

CSS:

{
/*gallery*/
img.floatLeft { 
    float: left; 
    margin: 20px; 
    border:groove;
    padding-right:15 px;}


.imagebox { float: left; width: 180px; margin-right: 20px; }

#gallery {width:740px; height:400px; position:relative; z-index:100; padding-right:10px;margin-bottom:150px}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}

#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

#gallery ul li a b {position:absolute; visibility:hidden; left:0; top:5px; display:block; width:560px; height:350px; ;
filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
-khtml: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}

#gallery ul li a b img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-khtml: scale(0);
transform: scale(0);
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
-khtml: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}

#gallery ul li a:hover {white-space:normal; outline:0;}

#gallery ul li a:hover b {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:1; visibility:visible;}
#gallery ul li a:hover b img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-khtml: scale(1);
transform: scale(1);
}

#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto;/* border:1px solid #000; padding-left:50px;*/
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
4

1 に答える 1

0

単にこのようなことを試してください

HTML

<ul>
    <li>blah</li>
    <li>blah2</li>
</ul>​
CSS

ul li:nth-child(1){
    background-color: #ff0000;
}

ul li:nth-child(2){
    background-color: #00ff00;
}

li {
    display: inline-block;
    height: 20px;
    width: 100px;
    text-align: center;
     transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

li:hover {
     width: 300px;
}​
于 2013-10-14T04:34:26.847 に答える