Наведите изображение, используя css

Question

Я пытаюсь создать изображение наведения для моей кнопки «читать дальше» в блогере. Я пытаюсь ссылки:

<b:if cond='data:post.hasJumpLink'> 
     <div class='jump-link'> 
     <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://3.bp.blogspot.com/-JpvWYCR8FXA/Vp1oL9cD7BI/AAAAAAAAAe4/1PRPh1ASGG8/s1600/extendedreadmore.png'/></a> 
     </div> 
    </b:if> 

с этим CSS:

.jump-link:hover { 
     background: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg'); 
    } 

, но это не появляется. Я пробовал несколько вариантов и, похоже, не нашел похожих тем, которые нашли решение.

Answer 1

Вы можете попробовать как this-

.jump-link:hover { 
 
     background: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg') no-repeat \t ; 
 
    } 
 
    .jump-link:hover img{opacity:0;}

<b:if cond='data:post.hasJumpLink'> 
 
     <div class='jump-link'> 
 
     <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://3.bp.blogspot.com/-JpvWYCR8FXA/Vp1oL9cD7BI/AAAAAAAAAe4/1PRPh1ASGG8/s1600/extendedreadmore.png'/></a> 
 
     </div> 
 
    </b:if>

Я надеюсь, что я буду помогает вы.

Answer 2

Вы используете фон как отдельное свойство.

То, что вы ищете:

.jump-link:hover 
    { 
     background-image: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg'); 
    } 

Дополнительная информация Here