Ersetzen Sie Text mit einer Schaltfläche

Question

Ich kann nicht finden, die Antwort darauf zu finden; Wenn ich es google, bekomme ich nur "Knopftext ersetzen".

Ich möchte über etwas Text schweben, und diesen Text mit einer Schaltfläche ersetzen. Ich habe die FadeIn/FadeOut-Technik und die Show/Hide-Technik ausprobiert. Die Schaltfläche wird jedoch sichtbar, sie befindet sich in einem anderen Bereich.

Hier ist mein 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(){ 
    }); 
}); 

Mein HTML:

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

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

Also, wenn jemand kann mir helfen. Es ist mir egal, ob es mit Jquery ist, oder einfach nur HTML/CSS

Answer 1

Sind Sie einfach versucht, etwas Text als eine Schaltfläche beim Hover erscheinen zu lassen? wenn so sollte diese Arbeit gut für Sie:

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

 
div:hover { 
 
    background: red 
 
}

<div>Psuedo button</div>

Oder wenn Sie den Text verbergen und die Taste auf schweben zeigen:

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

Answer 2

Sie sollten verstehen, dass sich die Elemente aufgrund eines Austauschs eines Elements möglicherweise verschieben zu den verschiedenen Inhalten. Oder Sie können beide Elemente auf die gleiche Weise stylen, so dass die Änderung nicht abrupt erfolgt.

könnten Sie verwenden nur CSS für diese

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