javascript - 如何在悬停时使按钮出现在div的底部

Question

我正在尝试向站点添加效果。我有一个图标列表，这些图标分为 2 组，每组 3 个，使用 bootstrap 的 col-sm-4 设置了最小高度，总共有 6 个正方形。

我想做的是当用户将鼠标悬停在 div 的任何部分时，它会更改图标图像，并使下面的隐藏按钮可见。

我已经可以使用这两个功能，但是要查看图标更改，您必须将鼠标悬停在图标上，要查看按钮，您必须将鼠标悬停在 <p> 下方。标签是。我正在寻找一种方法，让他们在悬停在他们特定的 div 上时改变他们的状态。

这是我的代码；

html

<div class="col-sm-4 info-item">
        <a href="#"><img src="../desktop/icon1.png" onmouseover="this.src='../desktop/icon1_red.png'" onmouseout="this.src='../desktop/icon1.png'"/>
          <hr>
          <div class="icon-text">
            <p>
               Increase your conversion rates, which will thereby increase profit and customer acquisition.
            </p>
          </div>
        </a>
         <div class="hidden-button">
          <a type="button" href="#" class="btn btn-transition">
            <i class="fa fa-plus-circle fa-1x"></i>
            <span>Learn More</span>
          </a>
        </div> 
      </div> 

CSS

.info {
    padding: 100px;
}

.info-item {
    min-height: 350px !important;
}

.info-item a {
    text-decoration: none !important;
}

.info-item p {
    color: black !important;
}

#hidden-button i {
    color: red;
}

#hidden-button a {
    text-decoration: none !important; 
}



.btn-transition {
    padding: 20px 10px;
    text-decoration: none;
    border-color: #ef4035;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: white !important;
    background-color: #e9241d;
}

.hidden-button a {
    visibility: hidden !important;
}

.hidden-button:hover a {
    visibility: visible !important; 
}

我试图在没有 javascript 的情况下做到这一点，但如果 javascript 是唯一的选择，我会很乐意使用 js。

如果有人完成了类似的事情，我很想听听!谢谢您的帮助。

Answer 1

HTML

    <div class="col-sm-4 info-item">
      <a href="#"><img class="iconChange" src="desktop/icon1.png">
        <hr>
        <div class="icon-text">
          <p>
            Increase your conversion rates, which will thereby increase profit and customer acquisition.
          </p>
        </div>
      </a>
      <div class="hidden-button">
        <a type="button" href="#" class="btn btn-transition">
          <i class="fa fa-plus-circle fa-1x"></i>
          <span>Learn More</span>
        </a>
      </div> 
    </div> 

CSS

            .info {
                padding: 100px;
            }

            .info-item {
                min-height: 350px !important;
            }

            .info-item a {
                text-decoration: none !important;
            }

            .info-item p {
                color: black !important;
            }

            #hidden-button i {
                color: red;
            }

            #hidden-button a {
                text-decoration: none !important; 
            }



            .btn-transition {
                padding: 20px 10px;
                text-decoration: none;
                border-color: #ef4035;
                border-radius: 3px;
                font-size: 12px;
                font-weight: 700;
                color: white !important;
                background-color: #e9241d;
            }

            .hidden-button{
                display:none;
            }

Jquery

    $(document).ready(function(){   
            $('.col-sm-4')
            .mouseenter(function(){
                $('.iconChange').attr('src', '/desktop/icon1_red.png')
                $('.hidden-button').show();
            })
            .mouseleave(function(){
                $('.iconChange').attr('src', '/desktop/icon1.png')
                $('.hidden-button').hide();
            });
        });

未经测试，但很确定这会满足您的要求。当然，它只适用于单个按钮和图标集。需要更多信息才能使用多个 div、图标和隐藏按钮。