【问题标题】:css - sometimes when hover on elements it be transperent even its not definecss - 有时当悬停在元素上时它是透明的,即使它没有定义
【发布时间】:2017-07-02 15:48:30
【问题描述】:

我使用一个名为“save-button”的类来设计某些页面中的按钮,当鼠标悬停在按钮消失时,它在其他页面中的工作完美!!

这是 SCSS 页面中的类(我使用基础框架):

    .save-button,.comment-button
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/comment_save.png');
}

.exit-button,
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/chose_file.gif');

}
.login-button
{
  background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/login_.gif');
}
.send-message
{
 background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/send_mass.png');
}
.save-button:hover,
.exit-button:hover,.login-button:active,.login-button:focus,.login-button:hover,.comment-button:hover,.comment-button:focus,.comment-button:active,
,.send-message:hover,.send-message:focus,.send-message:active
{
    outline:transparent;
	background-color:transparent;
}

.exit-button,.save-button,.login-button,.comment-button,.send-message
{
background-repeat: no-repeat;
background-size:100% 100% ;
text-align:center;
color: white;
width:100%;
margin:0;
}
.comment-button
{
margin:0 0 1rem;
}

这是html页面中的实现: 这行:

<button type="button" class="button save-button" id="saveButton" onclick="OKSelectUserDialog()"><fmt:message key="confirm"/></button>

悬停时消失:

  <button   type="button" class="button save-button" onclick="filter();"></button>

有人可以帮助我吗?请……

【问题讨论】:

    标签: html css sass zurb-foundation


    【解决方案1】:

    试试这个

    .button.save-button:hover {
        	opacity: 0;
        }
        <button   type="button" class="button save-button" onclick="filter();"></button>
    
        

    【讨论】:

      【解决方案2】:

      我正在考虑您试图说您不希望您的保存按钮在鼠标悬停时完全透明为此您可以设置不透明度值。

      为了不透明

      这样做

      .save-button{
             opacity:1;
       }
       <button   type="button" class="button save-button" onclick="filter();">                  
       </button
      

      为了完全透明

      设置不透明度:0;

      或使用 0 到 1 之间的任何其他级别使其部分透明。

      【讨论】:

        猜你喜欢
        • 2019-06-26
        • 2023-03-26
        • 2019-09-12
        • 2011-06-03
        • 1970-01-01
        • 1970-01-01
        • 2011-04-04
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多