將CSS懸停在移動設備上

爲了說明問題，我是一名開始的程序員。我需要關閉移動設備圖片上的懸停功能，因爲當某人正在向下滾動頁面時，會出現問題。我讓一個程序員在upwork.com上完成它，並且他通過CSS成功完成了主頁圖像。將CSS懸停在移動設備上

但是，我現在在不同的部分下添加了一些新的圖像，這些新圖像啓用了它。不幸的是，我使用的程序員不想分享他是如何做到的，而是希望我們再次聘用他。

我想最好找出如何自己做到這一點。

的頁面是foxandowlkids.com/index_postlaunch.html

你會看到「特點」的形象懸停在一臺筆記本電腦，但關閉移動。我怎樣才能用我的「多功能」圖像來實現這一點？說實話，甚至不知道我應該看哪個CSS文件。

任何幫助將不勝感激！

來源

2017-03-17 denverowl

嘗試使用您的瀏覽器開發工具來檢查網頁正在做什麼以及哪些css文件/類正在生效。 – Brino

線3478和/www/css/style.css3460正在造成的影響。要禁用它，您可以將這些聲明（包括選擇器）包裝在@media查詢中，或者您可以從其他文件覆蓋它們。

要修改他們在的地方，你可以使用：

@media (min-width:768px) { 
    .works-grid.hover-white .work-item:hover .work-img:after{ 
    background: rgba(250,250,250, .9); 
    } 
} 
/* ... */ 
} 
@media (min-width:768px) { 
    .work-item:hover .work-img:after{ 
    background: rgba(20,20,20, .85); 
    } 
}

不過，我推薦第二個選項，將您的mods在不同的樣式表，style.css後加載，因爲器官功能障礙綜合徵的style.css將丟失在主題更新上，（除非您使用的是兒童主題，但似乎並非如此）。所以這裏，更安全的路線，要放置在自己的樣式表：

@media (max-width:767px) { 
    .works-grid.hover-white .work-item:hover .work-img:after, 
    .work-item:hover .work-img:after { 
     background-color: transparent; 
    } 
}

有機會你想要交易的768px斷點992px，如果你想在受影響的設備或540px平板電腦，如果你只想限制（大多數）智能手機的變化。

然而，被告知請它始終是一個壞主意，讓生產不合格的代碼，如打破東西在不知不覺中是巨大的機會。作爲一般規則，花費少量資金購買這麼小的東西總是有價值的，因爲它可能會在不同的屏幕尺寸或不同的設備上出現這種風險，除非您瞭解代碼的變化，適用時間以及如何使用測試它。

在測試環境中玩所有你想要的，並用它來學習。但是，如果你關心你的網站和你的客戶面前的品牌形象，不要改變你在生產中不理解的東西，不要改變你的產品，比如CSS，javascript或php。這不是問題如果你會打破它，但當。不要聽我的話。詢問您選擇的10個或更多開發人員，與您沒有任何工作關係並查看答案。

來源

2017-03-17 21:51:11

非常感謝你，這非常好！ – denverowl

在該特定網站上，訣竅似乎是在<html>元素中尋找該類。在普通屏幕上，它具有.no-mobile類。對於移動設備，這將更改爲.mobile。

經過css和尋找這樣的地方有一個東西：懸停狀態：

.work-item:hover .work-img > img { 
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

修改它，以便有眼前的一切都是一個html.no移動選擇。這會讓你只瞄準不被視爲「移動」的屏幕。修改後的代碼可能是這個樣子：

html.no-mobile .work-item:hover .work-img > img { 
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

請知道，這隻會在你的情況下工作，因爲有明顯的腳本的地方，是檢查用戶正在使用的設備類型和更新HTML類，你可以利用它。

使用純CSS，您需要編寫媒體查詢和目標特定設備寬度。重寫你的影響可能是這個樣子，只用768px或更大屏幕尺寸的目標設備：

@media (min-width: 768px) { 
    .work-item:hover .work-img > img { 
     -webkit-transform: scale(1.05); 
     -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     -ms-transform: scale(1.05); 
     transform: scale(1.05); 
    } 
}

來源

2017-03-17 21:47:01 DavyH

感謝您的幫助！ – denverowl

將CSS懸停在移動設備上

回答

相關問題