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，图标和隐藏按钮。

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

1 个答案: