将一个图像放在另一个图像上方，不具有不透明度

Place an image above another image without opacity

本文关键字：图像 不透明度 另一个 一个      更新时间：2023-09-26

我想在另一个图像上方显示一个图像。将鼠标悬停在图像下方时，应显示上方图像，而图像下方的不透明度应更改。

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

.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/

小提琴

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

jquery

原文的编写方式是，当单击单个 .items 分类元素时.add_cart页面上的所有分类元素都会被显示/隐藏，而不透明度仅适用于单个悬停的 .items（根据 CSS）

改变了这个..

    $('.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 的选项。

工作小提琴

就像评论中建议@Sougata的那样，您可以将图像放在div 之外items并使用 css 属性更改位置 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>

相关文章：