無法設置按鈕效果

我在這裏有點困惑。我想要做的是我試圖做2並排按鈕，當一個被徘徊它改變背景顏色，當另一個被徘徊它改變。像一個切換。現在問題出現了，當我點擊它時，它會保留添加類的效果，但現在發生的情況是，當我mouseleave不保留它的狀態時。請告訴我我在哪裏做錯了。這裏無法設置按鈕效果

這裏是小提琴Fiddle

有些代碼是這樣的

$('#masterContainer #leftDiv').mouseenter(function (event) { 
      $(this).css('background-color', 'black'); 
      $(this).css('color', 'white'); 
      $('#masterContainer #leftDiv img').attr('src', 'heartWhite.png'); 
     });

來源

2014-01-25 designerNProgrammer

當我在第二個按鈕懸停應該chanage第二圖像的背景顏色。它工作正常，但是當我點擊那個按鈕，它應該留在那個BG，現在的重點是我添加了一個點擊的類，但是當我徘徊它再次使用該鼠標事件。 – designerNProgrammer

有waaaay太多的JavaScript這樣簡單的事情去那裏。（如果我理解你正在尋找的東西。）

小提琴：http://jsfiddle.net/xYLyT/2/

讓CSS做的工作。 :)

HTML：

<div class="container"> 
    <div class="box zuck"> 
     Zuck 
    </div> 
    <div class="box albert"> 
     Albert 
    </div> 
</div>

JS：

$('.box').click(function (event) { 
    $('.box').removeClass('clicked'); 
    $(this).addClass('clicked'); 
    event.stopPropagation(); 
});

CSS：

body { 
    background-color : silver; 
    margin   : 0; 
    padding   : 0; 
} 
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 

.container { 
    border : 2px solid black; 
    float : left; 
    height : 180px; 
    width : 803px; 
} 

.box { 
    border-right : 1px solid black; 
    float  : left; 
    height  : 100%; 
    transition : all 1s ease 0s; 
    width  : 50%; 
    padding: 0; 
} 
.box:hover, 
.box.clicked { 
    background-color: black; 
    color: white; 
} 
.zuck { 
    background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTUZnc_P0eH1w67I_YaaWo18Tgt83RFrepGDJm-AA8d9pg_kWM8Pw') no-repeat center center; 

} 

.albert { 
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYtxk2DUEWNsNpH0jTMqLc22tYccLZiwYxiCKKOCLGTVr2QZp_nw') no-repeat center center; 
}

來源

2014-01-25 06:01:40

event.stopPropagation（）;請告訴我這是什麼意思？ – designerNProgrammer

它可以防止事件冒泡。 http://api.jquery.com/event.stoppropagation/ –

如果你委託你的所有樣式的CSS類，然後讓所有你需要做的，你可以簡化您的問題是在hover和click上更改箱子的等級。

例如，假設標記：

<div class="box">container one</div> 

<div class="box">container two</div>

和CSS：

.box { 
    display: inline-block; 
    height: 200px; 
    width: 400px; 
    background: #cdcdcd; 
} 
.box.hovered, .box.clicked { 
    background: #797979; 
}

就像你用後，可以實現它的聲音效果：

// Handle the mouseenter/leave events with a unique class 
$('.box').on('mouseenter', function() { 
    $(this).addClass('hovered'); 
}).on('mouseleave', function() { 
    $(this).removeClass('hovered'); 
}); 
// Handle click event with a different class and toggle method 
$('.box').on('click', function() { 
    $(this).toggleClass('clicked'); 
});

另外，如果您希望的框根據點擊開關可以使用：

$('.box').on('click', function() { 
    $(this).removeClass('hovered'); 
    $(this).siblings('.box').addClass('hovered') 
}); 
// Use this block instead of the previous `click` handler above

到到您的樣式表的抽象風格（而不是使用.css法）的優點是：

A.你的模樣了從標記（關注點分離）分離，並避免使用內聯樣式覆蓋問題。

B.它通過將問題減少到類的添加/刪除來顯着簡化您的DOM交互。

這裏有一個Fiddle

來源

2014-01-25 05:50:17 monners

嘿，當我點擊按鈕1的按鈕效果應該被刪除，應strick按鈕1.謝謝 – designerNProgrammer

我已經更新了我的答案和小提琴。 – monners

只是一個問題，這是什麼意思event.stopPropagation（）; – designerNProgrammer

無法設置按鈕效果

回答

相關問題