如何在焦點位於「內部」時更改元素/容器的樣式？

假設有這樣的代碼：如何在焦點位於「內部」時更改元素/容器的樣式？

<div class="notSelected"> 
     <label>Name 
      <input type="text" name="name" id="name" /> 
     </label> 
     <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改變的時候選擇：

用戶集中在輸入元素上
用戶在notSelected DIV

當他改變重點選定移動鼠標div應該不再被選中。

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

在JavaScript中做這種事情的最佳方式是什麼？有沒有什麼JavaScript框架可以幫助我做這件事？所以它會很容易添加像褪色等效果...

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

來源

2008-10-19 Andrea Ambu

我會建議你看看jQuery的任務。這很容易學習，並迅速產生良好的效果。但是單純描述你的效果，純JavaScript就足夠了。

讓您的DIV始終有一個名爲「可選」的類。您可以稍後切換其他CSS類。創建一個名爲「selected」的CSS類，並給它期望的外觀。

<div class="selectable"> (=off) vs. <div class="selectable selected"> (=on)

然後添加像這樣到文檔的腳本部分：

$(document).ready(function(){ 

    // handle mouseover and mouseout of the parent div 
    $("div.selectable").mouseover(
    function() { 
     $(this).addClass("selected").addClass("mouseIsOver"); 
    } 
).mouseout(
    function() { 
     $(this).removeClass("selected").removeClass("mouseIsOver"); 
    } 
); 

    // handle focus and blur of the contained input elememt, 
    // unless it has already been selected by mouse move 
    $("div.selectable input").focus(
    function() { 
     $(this).parents("div.selectable").not(".mouseIsOver").addClass("selected"); 
    } 
).blur(
    function() { 
     $(this).parents("div.selectable").not(".mouseIsOver").removeClass("selected"); 
    } 
); 
});

這是未經測試所以有可能是它一個小故障，但它會給你的總體思路從哪裏開始。

P.S：在鼠標移動時改變文字大小可能不是所有想法中最好的。它導致重新排列惱人用戶的頁面佈局。

來源

2008-10-19 09:35:17 Tomalak

謝謝你的提示，但它可以用於表單的一個區域。例如，一旦他專注於登錄區域或配置文件區域，例如，再次感謝您！ – 2008-10-19 09:56:16

還有一個純粹的CSS解決方案來解決這個問題。但是，它不MSIE 6在技術上的工作，其工作原理類似於Tomalek的解決辦法，但不是使用JavaScript來切換元素的類，它使用CSS來切換它的風格：

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

來源

2008-10-19 12:38:12

非常好的方式，+1！ – 2008-10-19 12:56:27

雖然與舊版瀏覽器不兼容。 IE6仍然被廣泛使用，並且不支持A以外的元素上的懸停僞類。 – Tomalak 2008-10-19 14:16:43

@Tomalak：我在我的文本中說過。但是，越來越多的新應用程序正在放棄IE6支持。這是否可取是另一個問題。結合優雅的退化，這顯然是一個選擇，尤其是因爲一個CSS的方法也比JavaScript有優勢（不是每個人都有）。 – 2008-10-19 15:51:21

這有點風馬牛不相及，但標籤標籤不包含輸入標籤。您爲標籤賦予一個「for」屬性，該屬性對應於輸入元素的ID。例如，

<label for="username">Username</label> 
<input type="text" name="username" value="Enter your username..." id="username" />

來源

2008-10-19 14:55:19 whalesalad

@Tomalak：

你爲什麼查詢DOM四次？

一個小編輯，而是一個巨大的速度效益：

$("div.selectable").mouseover(function() 
{ 
    // ... 
}).mouseout(function() 
{ 
    // ... 
});

來源

2008-10-19 15:46:58 roosteronacid

另一個無關的到最原始的問題的答案，但... jQuery的也有做鼠標懸停/鼠標移開東西替代語法稱爲懸停。

$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });

例，

$('ul#nav li').hover(function() { 
    $(this).addClass('highlight'); 
}, function() { 
    $(this).removeClass('highlight'); 
});

對不起那些雙$的，我似乎無法弄清楚如何逃脫。

來源

2008-10-20 10:05:38 whalesalad

如何在焦點位於「內部」時更改元素/容器的樣式？

回答

相關問題