Question

的jsfiddle： http://jsfiddle.net/baumdexterous/9DS2r/

1）我创建了一个不透明度为1的图像。当您将鼠标悬停在图像上时，不透明度变为.3并且图像上方会出现一个按钮。问题是，当您将鼠标悬停在按钮上时，图像的不透明度将返回1.如果悬停在图像或按钮上，我怎样才能使图像的不透明度保持.3。

2）单击“播放”时，原始图像将更改为新图像。但由于鼠标位于图像上方，因此新图像具有不透明度.3。即使徘徊，如何将新图像设置为不透明度为1？

HTML：

<div class="show-image">
    <img src="https://s3.amazonaws.com/blitzbase-assets/assets/1.png" />
    <input class="the-buttons" type="button" value="Play" />
</div>

CSS：

div.show-image {
    position: relative;
    float:left;
    margin:0px;
    padding: 0px;
    background: #333;
}

div.show-image img {
    opacity: 1;
    background: white;
}

div.show-image img:hover {
     opacity: .3;
    -webkit-transition: opacity .2s ease-in-out;
}

div.show-image:hover input {
    display: block;
}
div.show-image input {
    position:absolute;
    display:none;
    top: 100px;
    left: 100px;
}
div.show-image input.hide {
    display: none;
}

使用Javascript：

    var originalImgSrc = $('img').attr('src');

// Change image on button click
$(".the-buttons").click(function() {

    $('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
    $(this).addClass("hide");
});

//Restore image on mouse out
$('.show-image img').mouseout(function() {
    $('img').attr("src", originalImgSrc );
    $('.the-buttons').removeClass("hide");
});

Answer 1

Here's a fiddle

以下是您的两个问题的答案。

将悬停放在父级：

.show-image:hover img
添加＆＃34;隐藏＆＃34;父级上的类，并以这种方式改变不透明度。

$（本）.parent（）addClass（＆＃34;隐藏＆＃34）;

div.show-image.hide img { 不透明度：1; }
要在点击第一次后再次添加播放按钮，您必须从鼠标输出功能中删除隐藏类：

$（＆＃39; .the-按钮＆＃39）。亲本（）removeClass（＆＃34;隐藏＆＃34）;

Answer 2

改变你的CSS 从这个：

div.show-image img:hover {
     opacity: .3;
    -webkit-transition: opacity .2s ease-in-out;
}

到此：

div.show-image:hover img {
     opacity: .3;
    -webkit-transition: opacity .2s ease-in-out;
}

希望这会有所帮助

Answer 3

我从CSS中移除了您的不透明度，并将其放在您的jQuery函数中。我还用.hover（）替换了你的事件处理程序，并以父容器为目标。

$('.show-image').hover(
  function() {
    $(this)
      .find('img').css('opacity', '.3').end()
      .find('input').show();
  }, function() {
    $(this)
      .find('img').css('opacity', '1').attr("src", originalImgSrc).end()
      .find('input').hide();
  }
);

更新了小提琴：http://jsfiddle.net/9DS2r/15/

另请注意我点击“播放”时恢复不透明度所做的更新

Answer 4

您可以使用mouseover / mouseout事件添加/删除类并将CSS添加到该类，我添加了.hovered类。

var originalImgSrc = $('img').attr('src');

// Change image on button click
$(".the-buttons").click(function() {

  $('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
  $(this).addClass("hide");
});

function addHOVER() {
  $('.show-image img').addClass("hovered");
}

function remHOVER() {
  $('.show-image img').removeClass("hovered");
}

$(".show-image img").mouseover(addHOVER);
$(".show-image .the-buttons").mouseover(addHOVER);
$(".show-image .the-buttons").mouseout(remHOVER);
//Restore image on mouse out
$('.show-image img').mouseout(function() {
  $('img').attr("src", originalImgSrc);
  remHOVER();
  $('.the-buttons').removeClass("hide");
});

div.show-image {
  position: relative;
  float: left;
  margin: 0px;
  padding: 0px;
  background: #333;
}

div.show-image img {
  opacity: 1;
  background: white;
}

div.show-image img.hovered {
  opacity: .3;
  -webkit-transition: opacity .2s ease-in-out;
}

div.show-image:hover input {
  display: block;
}

div.show-image input {
  position: absolute;
  display: none;
  top: 100px;
  left: 100px;
}

div.show-image input.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
  <img src="https://via.placeholder.com/100.png/09f/fff" />
  <input class="the-buttons" type="button" value="Play" />
</div>

如何删除悬停状态

4 个答案: