Смена класса hover jquery?

Question

[hax0r :3]

Всем привет, есть вот такой jQuery код:

$('.round-trigger').hover(
    function(){$(this).addClass('round-edit')},
    function(){$(this).removeClass('round-edit')}
);

Он добавляет класс для кнопки при навидении, но у меня вопрос, у этой кнопки содерижиться тег "i" с классом "icon-add", как сделать что бы при навидении на кнопку она не добавляла класс, а просто меняла его у тега "i" на скажем класс "icon-edit"

Вот весть код:

<div id="round-container">
		<button class="round-trigger"><i class="icon-add"></i></button>
</div>

#round-container {
	width: 60px;
	display: block;
	padding: 2px 0;
	position: fixed;
	right: 28px;
	bottom: 30px;
	z-index: 1;
}

.round-trigger { 
	background: #db4437;
	border: 0;
	outline: 0;
	width: 56px;
	height: 56px;
	display: block;
	margin: 2px 0 0 2px;
	text-align: center;
	line-height: 60px;
	font-size: 24px;
	color: #fff;
	position: relative;
	overflow: hidden;

	-webkit-transition: box-shadow .1s cubic-bezier(.4,0,1,1);
	   -moz-transition: box-shadow .1s cubic-bezier(.4,0,1,1);
	     -o-transition: box-shadow .1s cubic-bezier(.4,0,1,1);
			transition: box-shadow .1s cubic-bezier(.4,0,1,1);

	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
	   -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
			box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);

	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
			border-radius: 100%;
}

.round-trigger:hover {
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.20),0 6px 12px rgba(0,0,0,.40);
	   -moz-box-shadow: 0 0 6px rgba(0,0,0,.20),0 6px 12px rgba(0,0,0,.40);
			box-shadow: 0 0 6px rgba(0,0,0,.20),0 6px 12px rgba(0,0,0,.40);
}

.round-trigger i {
	position: relative;
}

.round-edit:before {
	font-family: 'icomoon';
	content: "\e809";
	width: 56px;
	height: 56px;
	display: block;
	font-size: 19px;
	line-height: 55px;
}

$('.round-trigger').hover(
    function(){$(this).addClass('round-edit')},
    function(){$(this).removeClass('round-edit')}
);

Answer 1

[DevMan]

$('.round-trigger').hover(
    function() {
        $(this).children().removeClass().addClass('icon-edit');
    },
    function() {
        $(this).children().removeClass().addClass('icon-add');
    }
);

Answer 2

[Евгений Петров]

1. Самый правильный вариант — ориентироваться на псевдокласс :hover и все нужные изменения описывать с помощью контекстного селектора

.round-trigger:hover .icon-add {
	// Тут всё, что нужно
}

2. Если уж так нужно именно менять класс, то, хотя бы, оставить смену класса именно у контейнера, что концептуально верно, и по аналогии с предыдущим

.round-trigger.round-edit .icon-add {
	// Тут всё, что нужно
}

3. Ну и для совсем тяжёлого случая менять класс вот так

$('.round-trigger').hover(
	function () {
		$('.icon-add', this).addClass('round-edit');
	},
	function () {$(
		'.icon-add', this).removeClass('round-edit');
	}
);