Bubbling Issue

I have a div called 'options' which contains another called 'settings'. I want 'settings' to have a left border when the mouse is over 'options', but not when it's over 'settings'. I tried the code below but the style isn't being overwritten by the second onmouseover function.

function sett() {
var o = document.getElementById('options');
var s = document.getElementById('settings');
if (o && s) {
o.onmouseover = function() {
s.style.borderLeft = Ƈpx solid #88B216'
}
o.onmouseout = function() {
s.removeAttribute('style');
}
s.onmouseover = function() {
s.className = 'settingsactive'
s.style.borderLeft = 'none'
}
s.onmouseout = function() {
s.removeAttribute('className');
} }}

What can I do?