如何使按钮悬停在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，图标和隐藏按钮。