-1

Using media queries i am trying to hide a image of cube for desktop and then replace it with another iphone image for the cube.... i am able to hide the desktop image for iphone but the iphone image is not appearing..... how to fix the issue.....

http://jsfiddle.net/QYvrt/27/

http://jsfiddle.net/QYvrt/27/embedded/result/

providing my code below

<div class="desktopContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">desktopImage</div>

 <div class="iphoneContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://intra.defie.co/images/cubes/demoImage.png">iphoneImage</div>






@media (max-width: 767px) {

#rightSlider{
    border: 1px solid red;
}

#rightSlider{
            display:none !important;
          }
#rightSlider{ 
            display:inherit !important;
          }

.desktopContactImage{

            display:none !important;
          }

.iphoneContactImage{
            display:inherit !important;
            border: 1px solid red;
          }



}

#slidenav{
            display:none !important;
          }
#slidenav{ 
            display:inherit !important;
          }

}

@media (min-width: 768px) and (max-width: 979px) {

#rightSlider{
    border: 1px solid green;
}


}






/* Demo styling */
#rightSlider{
        display: none;
      }
#slidenav{
        display: none;
      }



     .iphoneContactImage{
        display: none;
      }
4

1 に答える 1

0

display:inherit !important を使用して要素を再表示する代わりに、試してみることをお勧めします

.iphoneContactImage{
  display:block;
  border: 1px solid red;
}

それでもうまくいかない場合は、ここで説明されているいくつかのテクニックを試すことができます: Transitions on the display: プロパティ

于 2013-02-07T02:50:57.893 に答える