Question

我想在另一张图片上方显示图片。并且在悬停在图像下方时，应显示上面的图像，并且图像下方的不透明度应该会改变。

现在结果是，图像都具有不透明度。

HTML：

<div class="contents">
            <div align="center">
                <p align="right">Sort by <select name=""><option value="">----- Select -----</option></select></p>
                <div class="items">
                    <p><img src="https://i.kinja-img.com/gawker-media/image/upload/cg0vk7wvosjaxlji7jhr.jpg" alt="" /></p>
                    <p>Microsoft Lumia 950</p>
                    <p><span class="strike offer_price">Rs.1000/-</span> <b>Rs.500/-</b></p>
                    <hr/>
                    <p><input type="checkbox" /> Add to compare</p>
                    <div class="offer_per">
                        <p><b>50% Off</b></p>
                    </div>
                    <div class="add_cart">
                        <p align="center"><img src="http://png-1.findicons.com/files/icons/1672/mono/32/shoppingcart.png" alt="" /></p>
                    </div>
                </div>
            </div>
        </div>

CSS：

.contents .items {
    width:24%;
    height:auto;
    display:inline-block;
    box-shadow: 0 0 2px 2px #CCCCCC;
    margin:10px 0 10px 5px;
    position:relative;
}
.contents .items:hover {
    box-shadow: 0 0 2px 2px #FD6123;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.contents .items p img {
    width:100%;
}
.contents .items .offer_per {
    position:absolute;
    top:0;
    background:#52C8D2;
    padding:5px;
    color:#FFFFFF;
    font-size:12px;
}
.contents .items .add_cart {
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    display:none;
}
.contents .items .add_cart p img {
    width:auto;
}

jquery：

    $('.items').mouseenter(function(e) {
        $('.add_cart').show();
    });

    $('.items').mouseleave(function(e) {
        $('.add_cart').hide();
    });

我摆弄了我的代码，看看https://jsfiddle.net/kcngmvcj/

Answer 1

拨弄

https://jsfiddle.net/Hastig/kcngmvcj/3/

jquery的

原始文件是这样写的，当点击单个.items分类元素时，页面上的所有.add_cart分类元素都被显示/隐藏，而不透明度仅适用于单个悬停.items（根据css）< / p>

改变了这个..

    $('.items').mouseenter(function(e) {
         $('.add_cart').show();
    });

    $('.items').mouseleave(function(e) {
        $('.add_cart').hide();
    });

到此..

    $('.items').mouseenter(function(e) {
         $(this).find('.add_cart').show();
    });

    $('.items').mouseleave(function(e) {
        $(this).find('.add_cart').hide();
    });

..处理多个.items块

CSS

替换这个..

.contents .items:hover {
    box-shadow: 0 0 2px 2px #FD6123;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

用这个..

.contents .items:hover {
    box-shadow: 0 0 2px 2px #FD6123;
}
.contents .items:hover img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.contents .items:hover .add_cart img {
    opacity: 1;
    filter: alpha(opacity=100);
}

.contents .items:hover更具体地在代码目标.items内的所有内容中添加了不透明度，并将红色框阴影边框与等式分开。

很多方法可以解决这个问题，包括仅限css选项。

Answer 2

<强> Working fiddle

与评论中建议的@Sougata一样，您可以将图像放在items div之外，并使用css attributr margin-top更改位置：

<div class="contents">
    <div align="center">
        <p align="right">Sort by <select name=""><option value="">----- Select -----</option></select></p>
        <div class="items">
          <p><img src="https://i.kinja-img.com/gawker-media/image/upload/cg0vk7wvosjaxlji7jhr.jpg" alt="" /></p>
          <p>Microsoft Lumia 950</p>
          <p><span class="strike offer_price">Rs.1000/-</span> <b>Rs.500/-</b></p>
          <hr/>
          <p><input type="checkbox" /> Add to compare</p>
          <div class="offer_per">
            <p><b>50% Off</b></p>
          </div>
        </div>
    </div>

    <div class="add_cart" style='display: none'>
      <p align="center"><img src="http://png-1.findicons.com/files/icons/1672/mono/32/shoppingcart.png" alt="" /></p>
    </div>
</div>

并将margin-top属性设置为.add_cart：

.add_cart{
  margin-top: -150px;    
}

希望这会有所帮助。

$('.items').mouseenter(function(e) {
  $('.add_cart').show();
});

$('.items').mouseleave(function(e) {
  $('.add_cart').hide();
});

.contents .items {
		width:24%;
		height:auto;
		display:inline-block;
		box-shadow: 0 0 2px 2px #CCCCCC;
		margin:10px 0 10px 5px;
		position:relative;
	}
.contents .items:hover {
		box-shadow: 0 0 2px 2px #FD6123;
		opacity: 0.5;
    	filter: alpha(opacity=50);
	}
.contents .items p img {
		width:100%;
	}
.contents .items .offer_per {
		position:absolute;
		top:0;
		background:#52C8D2;
		padding:5px;
		color:#FFFFFF;
		font-size:12px;
	}
.contents .items .add_cart {
		left: 0;
		position: absolute;
		right: 0;
		top: 50%;
		display:none;
	}
.contents .items .add_cart p img {
		width:auto;
	}

      .add_cart{
         margin-top: -150px;    
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">
    <div align="center">
        <p align="right">Sort by <select name=""><option value="">----- Select -----</option></select></p>
        <div class="items">
          <p><img src="https://i.kinja-img.com/gawker-media/image/upload/cg0vk7wvosjaxlji7jhr.jpg" alt="" /></p>
          <p>Microsoft Lumia 950</p>
          <p><span class="strike offer_price">Rs.1000/-</span> <b>Rs.500/-</b></p>
          <hr/>
          <p><input type="checkbox" /> Add to compare</p>
          <div class="offer_per">
            <p><b>50% Off</b></p>
          </div>
        </div>
    </div>

    <div class="add_cart" style='display: none'>
      <p align="center"><img src="http://png-1.findicons.com/files/icons/1672/mono/32/shoppingcart.png" alt="" /></p>
    </div>
</div>

将图像放在另一个没有不透明度的图像上方

2 个答案:

拨弄

jquery的

CSS