Question

嘿，我有连续的项目，当我点击它们或悬停我想要另一个div来显示beloew，

我有这个用于HTML。

<div id="projectspace">
   <div class="project">
        <a href="#" class="showdiv"><img src="images/gird systems.png" width="160px" /></a>
        <a class="viewbutton" href="pdf/grid systems.pdf">View</a>
   </div>

   <div class="project">
       <a href="#" class="showdiv"><img src="images/peace one day.jpg" width="160ppx" /></a>
       <a class="viewbutton" href="images/peace one day.jpg">View</a>
   </div>

   <div class="project">
       <a href="#" class="showdiv"><img src="images/dan_test.jpg" width="160ppx" /></a>
       <a class="viewbutton" href="images/dan_test.jpg">View</a>
   </div>
</div>

<div  class="hoverdiv">
    <div id="info">
        <p> some text.</p>
    </div>

    <div class="description">
       <p>some text</p>
    </div>
</div>

和查询

jQuery(document).ready(function() {
    Query(".showdiv").click(function() {
        jQuery(".hoverdiv").find(".description", this).toggle();

        return false;   
     });
});

谁有更好的解决方案？

感谢

Answer 1

你可能想试试这个;

$(".showdiv").mousedown(function(){
    $("div to show").show()
});

$(".showdiv").mouseup(function(){
    $("div to hide").hide()
});

Answer 2

你可以做这样的事情来悬停：

var hoverDivDescription = $(".hoverdiv").find(".description");

$(".showdiv").on("mouseenter mouseleave", function(ev) {
  if (ev.type == "moouseenter") {
    hoverDivDescription.show();
  } else {
    hoverDivDescription.hide();
  }
});

或点击：

var hoverDivDescription = $(".hoverdiv").find(".description");

jQuery(function($) {
  $(".showdiv").on("click", function(ev) {
    ev.preventDefault();
    hoverDivDescription.toggle();
  });
});

请参阅此codepen以获取单击示例（单击图像可用）：http://codepen.io/anon/pen/GgNWNR?editors=101

在链接点击上显示/隐藏div

2 个答案: