Question

我在DIV中有一张图片。当用户将鼠标悬停在图像上时，我希望从图像底部出现一个65％不透明度的白色框，该图像仅覆盖图像底部的约30％。在那个框中会出现类似“+ Order Sample”的文字，当用户点击该框时，它会被添加到购物车中。

足够容易处理添加到购物车部分它是css和可能需要javascript来实现这一点，我正在努力。有人可以让我开始吗？这是我到目前为止所拥有的。这包括第一个答案的编辑。

foreach($array as $key => $value) {
    $imgsrc = $value['option_value']. ".jpg" ;
    $option_name = $value['option_name'] ;
    $fullname = $value['quality'] . " " . $value['color'] ; 
    $cbpg = $value['cbpg'] ;
    $space = $value['space'] ;

    print "<div class='colorbook-color-guide-div' onmouseover='showOrderSample();'>" ;
      print "<img class='colorbook-color-guide-image js-color-option js-tooltip' nopin='nopin' data-tooltip-content='$option_name' src='/images/uploads/colors/$imgsrc' alt='$option_name' >" ;
      print "<div id='orderSample' onclick='hideOrderSample();alert(\"order sample\");' ><b>+ Order Sample</b></div>" ;
      print "<p class='colorbook-color-subtitle'>$fullname</p>" ;
      //print "<p class='colorbook-color-subtitle'>$cbpg $space</p>" ;
    print "</div>" ;

}

这是我的CSS。

.colorbook-color-guide-div {
  width: 176px;
  min-height: 107px;
  margin-bottom: 2px;
  margin-right: 21px;
  cursor: pointer;
  float:left;
  text-align:center;
}
.colorbook-color-guide-image {
  width: 176px;
  min-height: 86px;
}
.colorbook-color-subtitle {
    font-family: HelveticaNeueLT-Light, Museo-500, Helvetica, Arial, sans-serif;
    font-style: normal ;
    font-weight:600 ;
    font-size: 13px ;
    font-size: 1.3rem ;
    color: #929496 ;
    margin-top: -3px;
}
#orderSample {
    height:0px;
    top:100px;
    width:176px;
    display:block;
    overflow:hidden;
    background:white;
    opacity:.65;
}

和JavaScript

function showOrderSample() {
  var element = document.getElementById("orderSample");
  element.style.height = "30px"; 
  element.style.top = "70px"; 
}

function hideOrderSample() {
    setTimeout(function () {
        document.getElementById("orderSample").style.height = "0px"; 
    }, 500);
}

Answer 1

我的示例仅使用JavaScript，HTML和固定大小，但它可以满足要求。

请看这里的小提琴：

https://jsfiddle.net/ag7to93q/9/

<script>
function showOrderSample(element) {   

  element.children[1].style.height = "30px"; // access the second child of the div element
  element.children[1].style.top = "70px"; 

}

function hideOrderSample(element, event) {
    if (event && event.target.classList.contains("hoverDiv")) {
        alert("buy buy buy!");
        setTimeout(function () {
            element.children[1].style.height = "0px"; 
        }, 200);
    }
    else {
// do something here
    }
}
</script>
<div style="position:absolute;top:50px;left:50px;width:200px;height:100px;background:green;" onmouseenter="showOrderSample(this);" onclick="hideOrderSample(this, event);" onmouseleave="hideOrderSample(this, event);" >
    <img style="position:absolute;height:100px;width:200px;" src="https://jsfiddle.net/img/logo.png" ></img>
    <div id="orderSample" class="hoverDiv" style="position:absolute;height:0px;top:100px;width:200px;display:block;overflow:hidden;background:white;opacity:.65;"><b>+ Order Sample<b>
    </div>
</div>

Answer 2

请查看以下jsFiddle。请记住准确的答案需要更多详细信息，因此根据您的问题，我想出了一个近似（希望尽可能准确）的响应。让我知道，如果它有助于让您更接近您想要的位置，我们可以根据需要开展更紧密的工作。

HTML：

<div class="popup-overlay--gray">a</div>
<a class="popup-btn__open" href="#">Open Popup</a>

<div>
    <a class="popup-btn__close" href="#">Close Popup</a>
    <img class="popup" src="http://placehold.it/300x300"/>
</div>

CSS

[class*="popup-btn"] { text-decoration: none; color: white; background-color: gray; }
.popup-btn__close { top: 0; right: 0; }
.popup { display: none; }
.popup-overlay--gray { position: absolute: width: 100%; height: 100%; background-color: #333; opacity: 0.7; z-index: 1000; }

jQuery 2.1.3

var timer,
    delay = 500;

$(".show-popup").hover(function(){
    // on mouse in, start a timeout
    timer = setTimeout(function(){
        // showing the popup
        $('.popup').fadeIn(500);
    }, delay);
}, function() {
    // on mouse out, cancel the timer
    clearTimeout(timer);
});

Answer 3

Fiddle

Jquery解决方案

$('document').ready(function () {

    $('#myimage').hover(
    //hover in
    function () {
        $("#backgroundDIv").css('z-index', 101);
    },
    //hover out
    function () {
        $("#backgroundDIv").css('z-index', 99);
    });

});

HTML

<div id="mainDiv">
    <img id="myimage" src="http://i48.fastpic.ru/big/2013/0606/5c/aa5f8d03b34f8e79f18c07343573bc5c.jpg" />
    <input type="text" value="add me" id="backgroundDIv"/>
</div>

CSS

#myimage {
    z-index:100;
    position: absolute;
}
#backgroundDIv {
    z-index=99;
    position: absolute;
    top:200px;
    background-color:#fff200;
    opacity:0.4;
}

如何在悬停时在图像上显示可单击的文本框

3 个答案: