刪除對移動設備的懸停效果並顯示標題

我一直在搜索整晚尋找答案。我正在一個網站上工作，並試圖修改懸停效果的行爲。我不確定哪個.js文件正在創建效果，以及我應該如何修改它們。刪除對移動設備的懸停效果並顯示標題

基本上，我在主頁上有一個網格佈局，當您將鼠標懸停在圖像上時，它會顯示標題和黑色疊加層。標題上還有一點動畫。

我需要添加一個媒體查詢以在移動設備上阻止此操作，並使頁面加載時顯示塊的標題。你可以通過訪問該網站了解我的意思。

該網站是在這裏：theshoemaven（點）的COM

據我所知，您可以使用

var mq = window.matchMedia('@media all and (max-width: 700px)');

的JavaScript中創建媒體查詢。但我不確定在哪裏應用它，以及如何確保每個框上的標題出現在頁面加載中。

我非常感謝這方面的幫助。謝謝！

**更新**

我已經找到以下調用投資組合網格的函數。如果我可以在負載上顯示標題（不僅僅是懸停），我將處於非常好的狀態。不幸的是，PHP並不是我最喜歡的語言。 :)

/*---------------------------------------*/ 
      /* Output Starts 
      /*---------------------------------------*/ 


      // Start container 
      echo '<div class="'.$container.' cap-wrap">'; 

       // If hover 
       if($hover==true) { 

        echo '<div class="hover-wrap">'; 


         // If lightbox 
         if($link=='lightbox') { 


          echo '<a rel="gallery-'.$postid.'" href="'.$full[0].'" title="'.$image_cap.'" class="swipebox">'; 

          echo vk_hover('lightbox'); 

          echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>'; 

          echo '</a>'; 


         // If post 
         } else { 

          echo '<a href="'.$post_link.'" title="'.$post_title.'">'; 

          echo vk_hover('link'); 

          echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>'; 

          echo '</a>'; 

         } 


        echo '</div>'; 


       // If no hover 
       } else { 

        echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>'; 

       } 

       // The Caption 
       if($caption==true && $image_cap!='') { 

        echo '<div class="caption no-link no-dec"><p>'.$image_cap.'</p></div>'; 

       } 

      // End container 
      echo '</div>'; 


     } // end foreach 

    } // end if attachments 

} // end function

來源

2014-12-07 Brandon Frye

matchMedia API有其用途：使用addListener可以讓您知道您的媒體查詢切換的時間。在我看來，它可能不應該在這裏使用。

我注意到頁面的主體有以下類：「noTablet」，「noMobile」，所以當我模擬一個iphone，果然「noMobile」變成了「移動」。

我打算建議使用body.noMobile選擇器來實現一個100％的css修復程序，但它似乎使用了大量的javascript來使效果首先發生，這就是設置內聯樣式，所以...

看着你的JavaScript我發現下面的壓縮碼：

s(".hover > div").css("opacity", "0"), s(".hover").hover(function() { 
     s(this).children("div").addClass("fadeUpIcon").animate({opacity: "1"}, 100) 
    }, function() { 
     s(this).children("div").css("opacity", "0").removeClass("fadeUpIcon")

，如果你要切換所有選擇的預先考慮body.noMobile像：$('body.noMobile .hover > div')你可能會消除「覆蓋「適用於所有移動設備。

那麼你可以使用簡單的（儘管你的選擇將可能有更具體）CSS，如：

body.mobile .hover { 

}

款式它移動。

這可能會爲你工作，但我強烈的意見，你應該嘗試預算時間去除JavaScript控制這一點，只需使用：懸停僞選擇器與轉換和轉換，以達到相同的效果。如果您真的想使用媒體查詢而不是您目前使用的任何移動檢測，那麼這些可以很容易地進入CSS。

來源

2014-12-07 06:57:39 Brandon

感謝您的提示，但我不確定我是否完全理解，並進行必要的更改。這個主題的作者建議進入並更改一個函數（調用投資組合），然後調整fadeup CSS。我找到了調用這個內容的函數，我將它添加到** UPDATE **下的原始文章中。我想我可以讓它稱爲標題，即使它沒有徘徊，然後將其隱藏在桌面上。看，我不得不在移動時看到標題。將背景隱藏在手機上很容易。謝謝你的幫助！ – 2014-12-07 07:07:10

刪除對移動設備的懸停效果並顯示標題

回答

相關問題