Javascript 单击“显示内容”并悬停“更新内容”

我有一行按钮，当点击或悬停时会显示相关内容。但是现在我希望当另一个按钮被悬停，而另一个按钮被点击时，内容被临时更新

所以问题是，当我将鼠标悬停在另一个按钮上，而其中一个按钮已单击就绪时，它将显示该按钮的内容。但是，当我的鼠标离开时，它将不会从当前单击的按钮返回到内容。

请参阅我的代码：

 <div id="showcaseBttns">
  <a class="bttns" target="1">work 1</a>
  <a class="bttns" target="2">work 2</a>
  <a class="bttns" target="3">work 3</a>
</div>

<div id="main_left">
  <div id="work_main1" class="targetDiv">work 1</div>
  <div id="work_main2" class="targetDiv">work 2</div>
  <div id="work_main3" class="targetDiv">work 3</div>
</div>


var clicked = false;

$('[id ^= "work"]').hide();

$('.bttns').click(function() {

  clicked = !clicked;
  $('.targetDiv').hide();
  $('#work_main' + jQuery(this).attr('target')).show();

});

$('.bttns').hover(
  function() {
    $('#work_main' + jQuery(this).attr('target')).show()
  },
  function() {
    if (!clicked) {
      $('#work_main' + jQuery(this).attr('target')).hide()
    } else {
      $('#work_main' + jQuery(this).attr('target')).show()
    }
  });

试试这种方法

var clickedId = null;

$('[id ^= "work"]').hide();

$('.bttns').click(function() {

  clickedId = jQuery(this).attr('target');
  $('.targetDiv').hide();
  $('#work_main' + jQuery(this).attr('target')).show();

});

$('.bttns').hover(
  function() {
    $('#work_main' + jQuery(this).attr('target')).show()
  },
  function() {
      $('#work_main' + jQuery(this).attr('target')).hide()
    if(clickedId!==null) {
      $('#work_main' + clickedId).show()
    }
  });

这是你需要的吗


var$点击；
$（'[id^=“work”]'）。隐藏（）；
$（'.bttns'）。单击（函数（）{
var$newClicked=$（此），
newClicked=$newClicked.attr（'target'），
oldClicked=$clicked&&$clicked.attr（'target'）；
如果（oldClicked&&oldClicked===newClicked）{
$（'work#U main'+新建单击）.hide（）；
$clicked=未定义；
回来
} 
$clicked=$newClicked；
$（'.targetDiv'）.hide（）；
$（'work#U main'+新建单击）.show（）；
});
$（'.bttns'）。悬停(
函数（）{
var hovTarget=$（this.attr（'target'）；
$（'#work_main'+hovTarget）.show（）；
如果（$clicked&&$clicked.attr（'target'）！==hovTarget）{
$（'#work_main'+$clicked.attr（'target'））.hide（）；
}
},
函数（）{
$（'.targetDiv'）.hide（）；
$clicked&&$（'#work_main'+$clicked.attr（'target'））.show（）；
});

工作1
工作2
工作3
工作1
工作2
工作3
所以您希望始终显示1个结果，即上次悬停或单击的结果？如果单击按钮1，则需要显示其内容，当您悬停按钮2时，则需要显示按钮2的内容，直到您退出悬停状态。否则，仅显示单击按钮的内容无效。当按钮被点击时，它会将其他div排除在外Yes！但这就像是div work_main1在点击状态下凌驾于其他div之上。因为当我在另一个div上悬停时，它不会显示。我怎样才能做出可以悬停以否决的div。对不起，我没听懂你的意思。所以，当单击div1并悬停div2时，应该只显示div2的内容？确实如此。当未被覆盖时，单击的div的内容将重新显示。现在，我已经相应地更改了片段。完美我的朋友！正是我需要的。最后一件事：如果我再次单击它，它将隐藏已单击的div，我如何才能使其生效。或者，如果我想实现这一点，使用Toggle更好吗？