Создание CSS Hover изображения в Wordpress

Когда вы смотрите на этой странице, вы увидите изображение комментария пузыря ...

Вот CSS прилагается на этот комментарий пузырь ...

#content .postmetadata .comments { 
background-image:url(images/comment.png); 
background-repeat:no-repeat; 
position:absolute; 
bottom:8px; 
height:25px; 
*bottom:18px; 
margin-left:8px; 
}

то, что я пытаюсь сделать, это, по умолчанию есть изображение, которое вы видите там ... (это черный с около 50% непрозрачности).

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

У меня есть готовое красное изображение или это что-то, что я могу сделать с помощью CSS?

Это имеет смысл?

источник

2013-09-09 webfrogs

Пожалуйста, прочтите следующее: http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a-link-to-it –

Создание изображения состояния наведения CSS в Wordpress представляется мне важным. Как я узнаю, что выйдет за рамки моего (оригинального плаката) и поможет другим. Вот почему я попытался сохранить это как можно более общее. Если вы считаете, что он должен быть отредактирован, чтобы отразить более общий вопрос, пожалуйста, сделайте это ... – webfrogs

#content .postmetadata .comments:hover { 
    background-image:url(images/yourredimage.png); 
    background-repeat:no-repeat; position:absolute; bottom:8px; 
    height:25px; 
    *bottom:18px; 
    margin-left:8px; 
    }

источник

2013-09-09 18:29:45 Bala

Вы прибивали его! Я думал, что это будет сложнее в Wordpress, но, похоже, это не ... Я должен перестать думать слишком далеко о вещах ... – webfrogs

Я думаю, вы пытаетесь сделать то, что у меня есть на моем сайте, для моих ссылок в социальных сетях.

он у меня установлен как спрайта: http://michelenarup.com/wp-content/themes/Portfolio/images/social.png

И код изменит положение фона для состояния парения:

#facebook{background-position: -100px 0px; float:left; height:50px; width:50px; padding:0; background-image: url('../images/social.png'); margin-bottom: 10px;} 
    a#facebook:hover{background-position: -100px -50px; outline:none;}

--- редактировать ---

a.comments { 
    background-image:url(images/comment.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    bottom:8px; 
    height:25px; 
    *bottom:18px; 
    margin-left:8px; 
    } 


    a.comments:hover { 
    background-image:url(images/comment-hover.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    bottom:8px; 
    height:25px; 
    *bottom:18px; 
    margin-left:8px; 
    }

источник

2013-09-09 18:17:22 Michele

Чтобы помочь этому пользователю, нет необходимости использовать спрайт - вы можете просто назначить изображение состояния зависания, но я согласен спрайт - отличный способ обойти это. – patricksweeney

@patricksweeney Можете ли вы немного расширить. Я не хочу использовать спрайты ... – webfrogs

Это будет то же самое, что и код спрайта. Только вместо того, чтобы установить фоновое положение, просто поместите другое фоновое изображение для состояния: hover – Michele

Для этого есть плагин. Проверьте это wp-visual-slide-box-builder

источник

2014-02-19 03:17:33 ecorvo

Создание CSS Hover изображения в Wordpress

ответ

Смежные вопросы