javascript - 如何在鼠标悬停时在图像上显示可点击的文本框

Question

我在 DIV 中有一个图像。当用户将鼠标悬停在图像上时，我希望从图像底部出现一个不透明度为 65% 的白框，它只覆盖图像底部的大约 30%。在该框中将显示类似于“+ 订购 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 和固定大小，但它完成了要求的操作。

看看这里的 fiddle :

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>