Question

我希望将按钮上的图像更改为此白色版本：http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png悬停时。我以为我只会添加一个背景图像：悬停，但这不起作用。有谁知道我怎么能做到这一点？什么都有帮助，干杯！

layout

parser.add_argument('--data_dir', type=str, default='./tmp/tensorflow/mnist/input_data',
                      help='Directory for storing input data')

Answer 1

.button_slidehr {
  color: #156466;
  border: 1px solid rgba(21,100,102,0.35);
  border-radius: 0px;
  /* extend left padding */
  padding: 18px 15px 18px 62px;
  position: relative;
  display: inline-block;
  font-family: Verdana;
  font-size: 14px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #156466;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_downhr:hover {
  color:white;
  border: 1px solid transparent;
  box-shadow: inset 0 100px 0 0 #156466;
}

.button_slidehr:hover:after {
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png);
}

.button_slidehr:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 80%;
}

<div class="button_slidehr slide_downhr">Contact HR Now></div>

Answer 2

.slide_downhr:hover:after {
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png);
}

在悬停时按钮中更改图像

2 个答案: