用按鈕替換文本

我似乎無法找到答案;當我谷歌，我得到的是「替換按鈕文本」。用按鈕替換文本

我想將鼠標懸停在某些文本上，並將該文本替換爲一個按鈕。我試過淡入/淡出技術和顯示/隱藏技術。但是，按鈕變得可見，它在不同的空間。

這裏是我的Jquery：

$(document).ready(function(){ 
$('#hidedsl6').hide(); 
    $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn(); 
     }, function(e){ 
     e.preventDefault(); 
     $('#hidedsl6').fadeOut(); 
    }); 
    $('#showfttn10').hover(function(){ 
    }); 
    $('#showfttn15').hover(function(){ 
    }); 
    $('#showfttn25').hover(function(){ 
    }); 
    $('#showfttn50').hover(function(){ 
    }); 
});

我的HTML：

<div class="DSL6"> 
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3> 
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button> 
</div>

我的CSS：

.DSLLocation { 
    margin-top: 110px; 
} 
.DSL6 { 
    background-color: #dbdbdb; 
    width: 300px; 
    height: 250px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
    float: left; 
    display: inline; 
}

所以，如果有人能幫助我。我不在乎它是否與Jquery，或只是簡單的HTML/CSS

來源

2016-04-20 Thomas Hutton

你只是試圖讓一些文本顯示爲懸停按鈕？如果是的話這應該很好地爲你工作：

div { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    transition: all 200ms ease 
 
} 
 

 
div:hover { 
 
    background: red 
 
}

<div>Psuedo button</div>

或者，如果你想隱藏的文本和顯示懸停按鈕：

.container { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    background: red; 
 
} 
 

 
button { 
 
    display: none; 
 
} 
 

 
.container:hover button { 
 
    display: block; 
 
} 
 

 
.container:hover .text { 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="text">Text</div> 
 
    <button>Psuedo Button</button> 
 
</div>

來源

2016-04-20 14:59:29

類。 –

@ThomasHutton請參閱編輯。 –

我就是這樣一個偶像。我沒有想到爲我的DSLLocation類製作一個div標籤。這使得它更容易！謝謝。 –

你應該明白，既然你用另一個元素替換了一個元素，它們可能會移動到位到不同的內容。或者，您可以以相同的方式對兩個元素進行樣式設置，以便更改不會突變。

你可以只使用CSS這個

.DSL6 { 
 
    background-color: #dbdbdb; 
 
    width: 300px; 
 
    height: 250px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
    float: left; 
 
    display: inline-block; 
 
} 
 
.DSL6 h3, .DSL6 button{margin:110px 0 0;padding:0;} 
 
.DSL6 h3{display:block;} 
 
.DSL6 button{display:none;} 
 

 
.DSL6:hover h3{display:none;} 
 
.DSL6:hover button{display:block;}

<div class="DSL6"> 
 
    <h3 class="DSLLocation" id="showdsl6">DSL 6</h3> 
 
    <button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button> 
 
</div>

的，我想隱藏H3標籤，並顯示一個按鈕標籤

來源

2016-04-20 15:09:52

用按鈕替換文本

回答

相關問題