光暈效果，但是隻希望它在4

-1

我在CSS輝光功能/屬性添加到我的按鈕。事情是我用過這個;

button:hover { 
    border: 80px solid #ffffff; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    -webkit-box-shadow: 0px 0px 4px #ffffff; 
    -moz-box-shadow: 0px 0px 4px #ffffff; 
    box-shadow: 0px 0px 4px #ffffff; 
}

的事情是，我的CSS文件鏈接，並正在使用的5個不同的HTML文件和更多的來了。因此，不是隻在一個HTML頁面上使用4-5個按鈕來獲得發光效果，現在發光功能位於所有其他HTML頁面上的所有按鈕上。

如何避免這種情況，我不能添加輝光功能＃ID的內線可以嗎？

我喜歡按鈕，這樣在CSS中

#TrafficJam1 { 
    position: absolute; 
    top: 1120px; 
    left: 20px; 
    height:107px; 
    width: 278px; 
}

這只是其中的一個

下面是特定的一個HTML部分，

<input type="image" src="TrafficJam.jpg" id="TrafficJam1">

我不得不使用這個代碼，因爲我的按鈕是圖像。

來源

2014-10-16 Rambo

向您想要發光的按鈕添加一個類，例如， 'glowbutton'並用'.glowbutton：hover'替換'button：hover'。 – RevanProdigalKnight 2014-10-16 13:21:14

你想添加一個類到需要發光的按鈕，並在CSS中設置style * that *（例如'.glowbutton：hover {...}'）。所示的CSS不適用於'input'元素，所以我對你的示例HTML有點困惑。 – 2014-10-16 13:22:02

謝謝你們，你們的建議解決了它。謝謝:) – Rambo 2014-10-16 13:30:10

給你想這個CSS應用到class這樣的按鈕：

<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">

類是HTML元素的另一個標識。但它與id不同，因爲您可以一次使用它們來定位多個元素。所以，你可以只給你想在同一類這樣的效果的按鈕和目標在你的CSS該類這樣的：

.glow:hover { 
    border: 80px solid #ffffff; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    -webkit-box-shadow: 0px 0px 4px #ffffff; 
    -moz-box-shadow: 0px 0px 4px #ffffff; 
    box-shadow: 0px 0px 4px #ffffff; 
}

那麼一點點題外話。你問的東西是非常基本的東西。所以我知道你是HTML和CSS的初學者，對吧？如果你是用codecademy.com這樣的在線學習工具來學習更多的HTML和CSS會是明智的。

來源

2014-10-16 13:23:05

請考慮使用代替'.classname'實際的類（.glow''），所以答案是更容易理解CSS新手。 – 2014-10-16 13:26:12

好點。我編輯了我的答案。 – 2014-10-16 13:27:24

嘿，謝謝你的回答。我解決了我的問題。是的，我是一個初學者。我已經完成了codeacademy的html和css課程。事實是，我正在學習IT和軟件開發，而我們的教授很瘋狂，並且正在給我們帶來太多難以比擬的項目等等。他給我們瘋狂的艱鉅任務來解決使用html，css，jquery和javascript，即使我們中沒有人（80名學生）無法編寫代碼。他整個學期都在做這個，所以沒有人學到任何東西。他不能指望我們解決瘋狂的東西，甚至不能做出正常的網頁大聲笑。但是，感謝您的幫助 – Rambo 2014-10-16 13:33:47

創建一個新的樣式表並將其鏈接到您希望按鈕發光的頁面中。這很容易通過使用<link>標籤完成，但我想你對此很熟悉。在該文件中，您可以添加您正在使用的代碼：

.classname:hover { 
    border: 80px solid #ffffff; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    -webkit-box-shadow: 0px 0px 4px #ffffff; 
    -moz-box-shadow: 0px 0px 4px #ffffff; 
    box-shadow: 0px 0px 4px #ffffff; 
}

來源

2014-10-16 13:27:37 Azrael

光暈效果，但是隻希望它在4

回答

相關問題