Question

我有一个与此相关的问题：

然而，在他的小提琴中，

他有两个div

<div id="rectangle"></div>
<div class="rectangle1"></div>

它们相似，但颜色不同

      rectangle {
      width: 140px; 
      height: 80px;
      background: #037CA9;
      margin-bottom:10px;
}

      .rectangle1 {
      width: 140px; 
      height: 150px;
      background: #37CA90;
}

他如何能够点击深蓝色矩形使浅蓝色矩形保持不变？

如果您加载小提琴，则所有代码都在那里。

Answer 1

保持状态标志，如果单击矩形则切换：

$(document).ready(function(){
  var clicked=false;

  $('.rectangle1').hide();

    $('#rectangle').on('click', function() {
        clicked = !clicked;
    });

    $('#rectangle').hover(
      function() {
        $('.rectangle1').show()}
      ,function() {
          if (!clicked) {
             $('.rectangle1').hide()
          }
      }
    );  
});

jsFiddle：http://jsfiddle.net/Q5cRU/34/

同样，再次单击它可以隐藏底部矩形。

Answer 2

替换javascript代码：

$(document).ready(function(){
    $('.rectangle1').hide();

  $('#rectangle').click(function() {
 $('.rectangle1').show()
  });
});

Answer 3

$(document).ready(function(){
    $('.rectangle1').hide();

  $('#rectangle').hover(function() {
 $('.rectangle1').show()
  },function() {
      $('.rectangle1').hide()
  });  
});

在这段代码中，很明显，在id等于矩形的悬停矩形中，矩形1会显示给我们。它是简单的jquery代码。

Answer 4

您只需要删除该类并添加一个包含相同css属性的类，这样就可以在单击后将鼠标悬停。这是一个更新的fiddle。

$('#rectangle').click(function(){
    $('.rectangle1').addClass('rectangle2');
    $('.rectangle1').removeClass('rectangle1');
});

CSS

.rectangle1, .rectangle2  {
   width: 140px; 
   height: 150px;
   background: #37CA90;
}

编辑：代码优化，fiddleJS链接更新。

jQuery在悬停时显示/隐藏//在点击时显示

4 个答案: