一千萬個為什麽

搜索

當焦點在“內部”時如何更改元素/容器的樣式?

假設有這樣的代碼:

<div class="notSelected">
       
      <div class="description">
          Tell us what's your name to make us able to fake to be your friend 
          when sending you an email.
      </div>
</div>

現在假設我為表單的每個元素都有這樣的東西(這只是一個例子)。 我想在下列情況下將樣式從“未選擇”更改為“已選定”:

  • 用戶專註於輸入元素
  • 用戶將鼠標移到notSelected div

當他改變焦點時,選定的div應該不再被選中。

我想要做這樣的事情來增加所選div的文本大小。無論如何,它可能會很酷進行其他更改,所以我更願意更改類屬性。

在JavaScript中做這樣的事情的最佳方式是什麽?有沒有什麽JavaScript框架可以幫助我做這件事?所以很容易添加衰落等效果......

我下載了MooTools,但是快速閱讀了文檔,我沒有看到如何在沒有任何形式div的特定ID的情況下做到這一點,但是我第一次使用它。我沒有問題,使用任何其他框架,但如果你建議一個,請寫也是我應該特別尋找,謝謝。

最佳答案

這個問題也有一個純粹的CSS解決方案。但是,它在MSIE 6中不起作用。從技術上講,它與Tomalek的解決方案類似,但不是使用JavaScript切換元素的類,而是使用CSS切換其樣式:

.selectable { /* basic styles …  */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }

轉載註明原文: 當焦點在“內部”時如何更改元素/容器的樣式?