Question

我在下面给出了两个div元素。我想一次显示一个div。 mouseout上的一个div和没有jquery的mouseover上的一个div。提前致谢

<div style= 'position: absolute;right: 0px;bottom: 0px;background:#ccc;color:#ffffff;height:15px; width:100px;text-align: center;color:#fff'><a href="http://facebook.com/site=1" target="_blank"> Facebook Ads</a> </div><div style= 'position: absolute;right: 0px;bottom: 0px;background:#ccc;color:#ffffff;height:15px; width:15px;text-align: center;'> Ads </div>

Answer 1

这是一种简单的CSS方式来做你想做的事。

在悬停时切换div的可见性。这种方式涉及将两个div包装在父级内。

.parent {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

.first {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  color: #fff
}

.second {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  display: none;
}

.parent:hover > .first {
  display: none;
}

.parent:hover > .second {
  display: block;
}

＆＃13;

.parent {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

.first {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  color: #fff;
  display: none;
}

.second {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
}

.parent:hover>.first {
  display: block;
}

.parent:hover>.second {
  display: none;
}

＆＃13;

<div class="parent">
  <div class='first'><a href="http://facebook.com/site=1" target="_blank"> Facebook Ads</a> </div>
  <div class='second'> Ads </div>
</div>

＆＃13;

Answer 2

您可以使用javascript实现此目的

首先为你的div分配ID ..说div1和div 2 ...现在在mouseout事件上调用一个JavaScript函数来显示div2并隐藏div1

params.require(:verbalquestion)

同样在mouseover上调用JavaScript函数，如下所示，显示div1并隐藏div2

function onMouseOut{
         document.getElemwntById("div1"). style.display = "none";

    document.getElemwntById("div2"). style.display = "block";

    }

Answer 3

在下面的代码中，您可以看到使用纯CSS的类似解决方案，代码更少，优化更好。

＆＃13;

.container {
  position: absolute; 
  right: 50px;
  bottom: 50px;
}

.fb-ads,
.ads {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
/*   height: 20px; */ /* Active it if you want to add height*/
  color: #fff; 
  text-align: center;
  background: #aaa;
}

.container:hover .ads {display: none;}

＆＃13;

<div class="container">
  <a class="fb-ads" href="http://facebook.com/site=1" target="_blank">Facebook Ads</a> 
  <div class="ads">Ads</div>
</div>

＆＃13;

或查看此处https://codepen.io/artysimple/pen/LzdGbe?editors=1100

在鼠标上下移动时显示两个div

3 个答案: