Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Jquery UI: resizable и hover

Автор: railist 3.4.2013, 15:59

Столкнулся с такой проблемой: вот есть у нас картинка

Код

<img src="images/2.png" id="image">

делаем возможность изменения размера картинки

Код

$("#image").resizable();

далее нужно, чтобы, при наведении на неё мыши, появлялась рамка

Код

#image:hover{border: 1px solid #AAAAAA};

Вот тут и возникает проблема - рамка отображается только сверху и слева, а снизу и справа её нет.
Вот скриншот:
user posted image

Первая картинка - это до наведения мыши, вторая - после.
Если делать не hover, а просто рамку, которая будет отображаться до наведение курсора, тогда рамка будет отображаться нормально.

Вот на всякий случай весь код

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.10.2/themes/base/jquery-ui.css" />
  <script src="jquery-1.9.1.min.js"></script>
 <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<title>border</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
$(function() {
 $("#image").resizable();
})
</script>
<style>
#image:hover{border: 1px solid #AAAAAA};
</style>
</head>
<body>
<img src="images/2.png" id="image">  
</body>
</html>

Я тестирую код в firefox 19.0.2

Автор: baldina 3.4.2013, 16:49

Код


$("#image").resizable({
    create: function() {
        $(this).hover(function(){
            $(this).css("border","1px solid #AAAAAA")
        },
        function(){
            $(this).css("border","none")
        })
    }
})

Добавлено через 1 минуту и 36 секунд
дело в том, что UI создает div вокруг картинки.
в принципе вместо всего этого можно сделать

Код


.ui-wrapper:hover { border: 1px solid #AAAAAA; }

но влиять будет на все элементы

Добавлено через 8 минут и 1 секунду
либо

Код


$("#image").resizable()
$("#image").parent().attr("id","image-wrapper")

Код


#image-wrapper:hover{border: 1px solid #AAAAAA};

Автор: railist 3.4.2013, 20:34

Спасибо за ответ!