鼠标悬停在背景图像上的过渡

Posted 2023-05-08

【中文标题】鼠标悬停在背景图像上的过渡

【英文标题】：Transition on background image on mouse over

【发布时间】：2017-12-15 09:50:18

【问题描述】：

我想在我的链接背景上实现一个简单的过渡，即图像，这样当我悬停它时，背景图像应该会旋转一点。

这是我有的，但它不起作用：

<div class="vegetable"><a href="#">link</a></div>

.vegetable a 
    background: url(../img/icons/carrot.png) no-repeat ;
    padding-left: 40px;
    color: #fff;
    font-size: 2em;
    line-height: 42px;
    background-size: 32px;
    width: auto;

    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;



.vegetable a:hover 

    /* Firefox */
    -moz-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* WebKit */
    -webkit-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Opera */
    -o-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Standard */
    transform: scale(1.1) rotate(30deg) translate(-5px);

【问题讨论】：

我们可以有 html

我已经更新了，希望对你有帮助

先生，请检查您所需的answer here

【参考方案1】：

为了得到你想要的结果，你需要使用伪元素作为背景和旋转，这样你就不会影响链接

见 sn-p：

.vegetable a 
  padding: 40px;
  color: #fff;
  font-size: 2em;
  line-height: 42px;
  background-size: 32px;
  width: auto;
  position:relative;
  display:inline-block;
  overflow:hidden;


.vegetable a:after 
  content:'';
  background: url(https://www.w3schools.com/css/img_fjords.jpg) no-repeat;
  background-size: cover;
  /* Standard */
  transition: all 1s ease;
  display:inline-block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  



.vegetable a:hover:after 
  /* Standard */
  transform: scale(1.1) rotate(30deg) translate(-5px);

<div class="vegetable"><a href="#">link</a></div>

【讨论】：

很奇怪为什么它不能与我的背景图片一起使用

@AndrewS rotate() 旋转整个元素，而不是背景，没有css属性只旋转背景。