wreder,
примерно так ...
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.simlpe {
height: 110px;
width: 80px;
border: 1px solid #FFF;
overflow:hidden;
}
.text {
color: #000;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('mouseenter','.simlpe', function(event){ // наведение исправил
$(this).css({
'width':'110px',
'borderTop': '1px solid #FF0000',
'borderBottom': '1px solid #FF0000',
'borderLeft': '1px solid #FF0000',
'borderRight': '1px solid #FF0000'
});
$(this).children('.text').css({
'color': '#FF0000'
});
});
$(document).on('mouseleave','.simlpe', function(event){ // наведение исправил
$(this).css({
'width':'',
'borderTop': '',
'borderBottom': '',
'borderLeft': '',
'borderRight': ''
});
$(this).children('.text').css({
'color': ''
});
});
$('.simlpe').click(function(event) { // событие для клика
$(this).removeClass('simlpe');
$(this).animate({
'width':'336px',
'height':'110px'
}, 'slow');
$(this).children('.text').css({
'float':'right'
});
event.stopPropagation();
});
$(document).click(function(e){ // для сворачивания блока в исходное при нажатии за границу элемента
var target = $(e.target).filter('.one');
if (target.length != 1) {
$('.one').animate({
'width':'80px',
'height':'110px'
}, 'slow').css({
'borderTop': '',
'borderBottom': '',
'borderLeft': '',
'borderRight': ''
});
$('.one').children('.text').css({
'float':'',
'color': ''
});
}
$('.one').addClass('simlpe');
});
});
</script>
</head>
<body>
<div class="simlpe one">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<nobr class="text">Центральный Javascript-ресурс</nobr>
</div>
</body>