时间戳

首页 > 解决方案 > 在悬停Jquery上添加图片背景和文字

javascript - 在悬停Jquery上添加图片背景和文字

问题描述

我正在尝试更改以在悬停时更改图片。这是我到目前为止所做的：

HTML

<div class="picture">
          <div class="text">
              <h1>Hey everyone!</h1>
          </div>

      </div>

CSS

.picture{
width: 200px;
height: 200px;
background-image: url("https://www.w3schools.com/css/trolltunga.jpg");}.text{
background-color: rgba(255,0,0,0.8);
width:200px;
height: 200px;
display: none;}

javascript

$(".picture").hover(function(){
$(this).children(".text").fadeToggle();});

标签： javascriptjqueryhtmlcss

解决方案

正如您在此示例中看到的那样，它工作正常：

$(".picture").hover(function() {
  $(this).children(".text").fadeToggle();
});
.picture {
  width: 200px;
  height: 200px;
  background-image: url("https://www.w3schools.com/css/trolltunga.jpg");
}

.text {
  background-color: rgba(255, 0, 0, 0.8);
  width: 200px;
  height: 200px;
  display: none;
}
<div class="picture">
  <div class="text">
    <h1>Hey everyone!</h1>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

推荐阅读