Question

我似乎无法找到答案;当我谷歌时，我得到的只是＆＃34;替换按钮文字＆＃34;。

我想将鼠标悬停在某些文字上，并将该文字替换为按钮。我尝试过fadeIn / fadeOut技术和Show / Hide技术。但是，按钮变得可见，它位于不同的空间。

这是我的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

Answer 1

您是否只是想在悬停时将某些文字显示为按钮？如果是这样，这应该很适合你：

＆＃13;

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

＆＃13;

<div>Psuedo button</div>

＆＃13;

或者如果你想隐藏文字并在悬停时显示按钮：

＆＃13;

.container {
  padding: 10px;
  display: inline-block;
  background: red;
}

button {
  display: none;
}

.container:hover button {
  display: block;
}

.container:hover .text {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

您应该明白，由于您要将一个元素替换为另一个元素，因此可能会因内容不同而移动。或者，您可以使用相同的方式设置两个元素的样式，以便更改不会突然发生。

你可以只使用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>

用按钮替换文字

2 个答案: