在鼠標懸停和跳出時顯示兩個div

我在下面給出了兩個div元素。我想一次顯示一個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>

來源

2017-10-08 John

這是一個簡單的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; 
}

.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; 
 
}

<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>

來源

2017-10-08 09:21:07

您可以使用JavaScript

首先分配ID給您的DIV實現這一..說DIV1和DIV 2 ...現在在mouseout事件調用JavaScript函數來顯示div2和隱藏div1

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

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

    }

同樣在鼠標懸停調用JavaScript函數如下顯示DIV1和隱藏DIV2

function onMouseOver{ 
     document.getElemwntById("div2"). style.display = "none"; 

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

    }

來源

2017-10-08 09:27:50 arvind

在代碼中可以看到純CSS類似的解決方案用更少的代碼，更好的優化。

.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;}

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

或看這裏https://codepen.io/artysimple/pen/LzdGbe?editors=1100

來源

2017-10-08 12:17:08

在鼠標懸停和跳出時顯示兩個div

回答

相關問題