如何在使用css悬停后隐藏文本？

时间：2016-09-20 07:32:02

标签： jquery html css

我必须在悬停在部分后隐藏文字。我必须显示完整的圆形图像，并在悬停后隐藏＆＃34;配置文件名称＆＃34;和＃34;指定＆＃34;。它应该只显示图像和访问个人资料按钮。我得到的结果低于此结果。你能帮助我吗？ enter image description here 需要这样的结果

enter image description here

＆＃13;
＆＃13; 
.white-color-bg
{
    background-color:  #ffffff ;
    text-align: center;
    padding: 10px;
     position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
}

.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
}

.teacher-circle img
{
    width: 135px;
    border-radius: 50%;
    position: relative;
    bottom: 50px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    background: #fff;
    z-index: 2;
}
.cursor-pointer
{
    cursor: pointer;
}

.item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  
  background: rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%; 
  
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a{
    position: absolute;
    bottom: 30px;
    margin-left:-50px;

}

.white-color-bg h2
{
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    font-size: 16px;
    
}

.white-color-bg h3
{
    font-size: 14px;
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    color: #e74c3c !important;


}
.white-color-bg h2, .white-color-bg h3
{
    position: relative;
    bottom: 20px;
    line-height: 0;
    color: #000;
    z-index: 0;
}

.btn-profile
{
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 05px 20px;
    border-radius: 05px;
    font-size: 16px;
    text-transform: capitalize;
    z-index: 3;
}

.btn-profile:hover
{
    background-color:#ffffff;
    color: #e74c3c; 
}
＆＃13; 
<div class="container">
    <div class="row">

     <div class="col-md-4">
            <div class="white-color-bg teacher-circle cursor-pointer">
              <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" >
              <div class="item-overlay right">
                    <a href="#" class="btn-profile">visit profile</a>
              </div>
              <h2>Profile name</h2>
              <h3>Designation</h3>
            </div>
        </div>
        </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

要实现此目的，您可以在visibility元素悬停时将h2和h3元素的hidden设置为.white-color-bg。试试这个：

.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}

＆＃13;
＆＃13; 
.white-color-bg {
  background-color: #ffffff;
  text-align: center;
  padding: 10px;
  position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
}
.white-color-bg:hover {
  overflow: visible;
}
.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
}
.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}
.teacher-circle img {
  width: 135px;
  border-radius: 50%;
  position: relative;
  bottom: 50px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  background: #fff;
  z-index: 2;
}
.cursor-pointer {
  cursor: pointer;
}
.item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a {
  position: absolute;
  bottom: 30px;
  margin-left: -50px;
}
.white-color-bg h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  font-size: 16px;
}
.white-color-bg h3 {
  font-size: 14px;
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  color: #e74c3c !important;
}
.white-color-bg h2,
.white-color-bg h3 {
  position: relative;
  bottom: 20px;
  line-height: 0;
  color: #000;
  z-index: 0;
}
.btn-profile {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 05px 20px;
  border-radius: 05px;
  font-size: 16px;
  text-transform: capitalize;
  z-index: 3;
}
.btn-profile:hover {
  background-color: #ffffff;
  color: #e74c3c;
}
＆＃13; 
<div class="container">
  <div class="row">

    <div class="col-md-4">
      <div class="white-color-bg teacher-circle cursor-pointer">
        <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2">
        <div class="item-overlay right">
          <a href="#" class="btn-profile">visit profile</a>
        </div>
        <h2>Profile name</h2>
        <h3>Designation</h3>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

首先将内容包装为隐藏在div元素中

#hide{
            bottom: 0;
            position: absolute;

}

给出不透明度：0;到css中的#hide元素

 <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" class="center">


<div class="white-color-bg teacher-circle cursor-pointer">

将img放在父元素之外

.center{
            left:50%;
            transform: translateX(-50%);
}



改变位置：绝对; 并调整顶部和底部以放置它:( 使用百分比！）



要使元素居中，请使用 .center 类

<!doctype html>
<html>


<body>
    <style>
        .white-color-bg {
            background-color: #ffffff;
            text-align: center;
            padding: 10px;
            height:200px;
            position: relative;
            float: left;
            margin: 2%;
            overflow: hidden;
            width: 100%;
            margin-top: 100px;
        }
        
        .white-color-bg:hover .item-overlay.right {
            right: 0;
            left: 0;
        }
        
        img {
            width: 135px;
            border-radius: 50%;
            position: absolute;
            bottom: 50px;
            box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
            border: 2px solid #fff;
            background: #fff;
            z-index: 2;
            top: 50px;
            
        }
            
        .center{
            left:50%;
            transform: translateX(-50%);
        }
        .cursor-pointer {
            cursor: pointer;
        }
        
        .item-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            overflow: hidden;
            text-align: center;
            /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
            width: 100%;
            -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
            -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
            transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
        }
        
        .item-overlay.right {
            right: 200%;
            left: -100%;
        }
        
        .item-overlay a {
            position: absolute;
            bottom: 30px;
            margin-left: -50px;
        }
        
        .white-color-bg h2 {
            font-family: 'Prompt', sans-serif;
            font-size: 400;
            font-size: 16px;
        }
        
        .white-color-bg h3 {
            font-size: 14px;
            font-family: 'Prompt', sans-serif;
            font-size: 400;
            color: #e74c3c !important;
        }
        
        .white-color-bg h2,
        .white-color-bg h3 {
            position: relative;
            bottom: 20px;
            line-height: 0;
            color: #000;
            z-index: 0;
        }
        
        .btn-profile {
            border: 2px solid #ffffff;
            color: #ffffff;
            padding: 5px 20px;
            border-radius: 5px;
            font-size: 16px;
            position: absolute;
            text-transform: capitalize;
            z-index: 2;
          left:60%;
        }
      
        
        .btn-profile:hover {
            background-color: #ffffff;
            color: #e74c3c;
        }
        .white-color-bg:hover > #hide {
            opacity:0;
        }
        #hide{
            bottom: 0;
            position: absolute;
            
        }
    </style>

    <div class="container">
        <div class="row">

            <div class="col-md-4">
                <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" class="center">
                    
                <div class="white-color-bg teacher-circle cursor-pointer">
                    
                    
                    <div class="item-overlay right">
                        
                        <a href="#" class="btn-profile center">visit profile</a>
                    </div>
                    <div id="hide" class="center">
                        <h2>Profile name</h2>
                        <h3>Designation</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>



func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {

        let subString = (textField.text as! NSString).substringWithRange(range)
        if subString == " " && textField == cardNumberTextfield
        {
            return false     // user should not be able to delete space from card field
        }
        else if string == ""
        {
            return true      // user can delete any digit
        }


        // Expiry date formatting

        if textField == expiryDateTextfield
        {
            let str = textField.text! + string

            if str.length == 2 && Int(str) > 12
            {
                return false                  // Month should be <= 12
            }
            else if str.length == 2
            {
                textField.text = str+"/"      // append / after month
                return false
            }
            else if str.length > 5
            {
                return false                  // year should be in yy format
            }
        }



        // Card number formatting

        if textField == cardNumberTextfield
        {
            let str = textField.text! + string

            let stringWithoutSpace = str.stringByReplacingOccurrencesOfString(" ", withString: "")

            if stringWithoutSpace.length % 4 == 0 && (range.location == textField.text?.length)
            {
                if stringWithoutSpace.length != 16
                {
                    textField.text = str+" "    // add space after every 4 characters
                }
                else
                {
                    textField.text = str       // space should not be appended with last digit
                }

                return false
            }
            else if str.length > 19
            {
                return false
            }
        }



        return true
    }

答案 2 :(得分：0)

＆＃13;
＆＃13; 
.white-color-bg
{
    background-color:  #ffffff ;
    text-align: center;
    padding: 10px;
     position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
  
}
.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}
.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
}

.teacher-circle img
{
    width: 135px;
    border-radius: 50%;
    position: relative;
    bottom: 50px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    background: #fff;
    z-index: 2;
}
.cursor-pointer
{
    cursor: pointer;
}

.item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  
  background: rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%; 
  
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a{
    position: absolute;
    bottom: 30px;
    margin-left:-50px;

}

.white-color-bg h2
{
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    font-size: 16px;
    
}

.white-color-bg h3
{
    font-size: 14px;
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    color: #e74c3c !important;


}
.white-color-bg h2, .white-color-bg h3
{
    position: relative;
    bottom: 20px;
    line-height: 0;
    color: #000;
    z-index: 0;
}

.btn-profile
{
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 05px 20px;
    border-radius: 05px;
    font-size: 16px;
    text-transform: capitalize;
    z-index: 3;
}

.btn-profile:hover
{
    background-color:#ffffff;
    color: #e74c3c; 
}
＆＃13; 
<div class="container">
    <div class="row">

     <div class="col-md-4">
            <div class="white-color-bg teacher-circle cursor-pointer">
              <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" >
              <div class="item-overlay right">
                    <a href="#" class="btn-profile">visit profile</a>
              </div>
              <h2>Profile name</h2>
              <h3>Designation</h3>
            </div>
        </div>
        </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

这是对@ RoryMcCrossan的回答的继续。我刚刚修改了几个bottom css属性来显示完整的圆形图像。我希望你只想这样：

更新：为叠加div设置top:50px;。 

.white-color-bg {
  background-color: #ffffff;
  text-align: center;
  padding: 10px;
  position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
}
.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
  top:50px;
}
.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}
.teacher-circle img {
  width: 135px;
  border-radius: 50%;
  position: relative;
  /*bottom: 50px;*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  background: #fff;
  z-index: 2;
}
.cursor-pointer {
  cursor: pointer;
}
.item-overlay {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a {
  position: absolute;
  bottom: 17px; /* bottom: 30px;*/
  margin-left: -50px;
}
.white-color-bg h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  font-size: 16px;
}
.white-color-bg h3 {
  font-size: 14px;
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  color: #e74c3c !important;
}
.white-color-bg h2,
.white-color-bg h3 {
  position: relative;
  /*bottom: 20px;*/
  line-height: 0;
  color: #000;
  z-index: 0;
}
.btn-profile {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 05px 20px;
  border-radius: 05px;
  font-size: 16px;
  text-transform: capitalize;
  z-index: 3;
}
.btn-profile:hover {
  background-color: #ffffff;
  color: #e74c3c;
}
<div class="container">
  <div class="row">

    <div class="col-md-4">
      <div class="white-color-bg teacher-circle cursor-pointer">
        <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2">
        <div class="item-overlay right">
          <a href="#" class="btn-profile">visit profile</a>
        </div>
        <h2>Profile name</h2>
        <h3>Designation</h3>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题