Как сделать кнопку, которая открывается и показывает полный текст onmouseover?

Вопрос:

Итак, я вижу несколько вещей, которые кажутся похожими на то, что они могут иметь отношение к этому вопросу, но они не настолько похожи, чтобы я мог использовать их ответ.

Во всяком случае, в основном, я хочу, чтобы на боковой панели была кнопка со знаком доллара. Когда мышка нависает над ним, я хочу, чтобы он плавно выскальзывался и на нем было слово “Пожертвовать”, удерживая $ в правой части кнопки. Затем, когда мышь больше не витает над ним, я хочу, чтобы она снова зашла.

Пример:

Мышь не закончилась:

$

Мышь над:

e $

te $

(слайды полностью)

Пожертвовать $

Кроме реальных кнопок. Примечание. Если он не может использовать изображение в качестве кнопки, это прекрасно. Было бы неплохо, если бы я мог, но, честно говоря, в конечном итоге это не имеет значения, так как я могу, вероятно, сделать кнопку HTML такой же приятной.

Это похоже на очень простой вопрос, поэтому я очень ненавижу спрашивать об этом, но я просто не могу понять это.

Редактировать:

Ну, вот одна вещь, которую я пробовал.

В заголовке:

<script type="text/javascript">
$(document).ready(function()
{
$("#imgAnimate1").hover(
function()
{
$(this).attr("src", "donateB.gif");
},
function()
{
$(this).attr("src", "donateA.png");
});
</script>

Где изображение:

<div id="sidebar">
<img id="imgAnimate1" src="Images/donateA.png" alt="" >
</div>

Результат (WHILE зависает над ним): http://prntscr.com/45js7q

Лучший ответ:

Эти ресурсы помогут вам начать работу в правильном направлении.

Переход CSS3 1

Переход CSS3 2

Сообщение о переполнении стека о том же типе вопроса + ответ

Вы можете достичь этого, даже не используя jquery. Только разметка CSS и CSS3

Пример:

.myImage{
    width:200px;
    height:25px;
    background:#C96666;
    position:relative;
    display:inline-block;
    left:-180px;
    transition: 1s;
}

.myImage:hover{
    transition: 1s;
    left: 0;
}

Оцените статью
TechArks.Ru
Добавить комментарий