Question

 body{
        font-size: 24px;
        display: flex;
        justify-content: center;
        margin: 75px 0;
    }
    
    .button{
        
        padding: 1px 3px 2px;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase;
        white-space: nowrap;
        background-color: #bfbfbf;
        border-radius: 3px;
        text-decoration: none;
        max-height: 24px;
        
        }
    
    .button:hover{
       display:"none";
      
        }
    
    .button:hover:after{
        content: 'my second box';
        cursor: crosshair;
        background-color: #46a546;
		
        }

<body>
    
     <div class="button">my first box</div>

    
</body>

这里有一些jsfiddle要修补。我觉得我已经尝试过各种组合来完成这项工作！关于我需要对此代码进行的更改类型的任何想法，以便停止原始框只是移动到一边？

Answer 1

如果目标是在悬停时将.button内的内容替换为:after伪类的内容，则您需要引入其他元素。隐藏元素时，它的psuedo元素也将被隐藏。您可以通过在要隐藏的内容周围嵌套span来隐藏跨度，然后＆＃34;替换＆＃34; span的内容包含悬停时父元素的伪元素的内容 - 就像这样。（ps - 你需要删除display: "none";中的引号 - 应该是display: none;而不是

＆＃13;

body {
  font-size: 24px;
  display: flex;
  justify-content: center;
  margin: 75px 0;
}

.button span {
  padding: 1px 3px 2px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  border-radius: 3px;
  text-decoration: none;
  max-height: 24px;
  display: block;
}

.button:hover span {
  display: none;
}

.button:hover:after {
  content: 'my second box';
  cursor: crosshair;
  background-color: #46a546;
}

＆＃13;

<div class="button"><span>my first box</span></div>

＆＃13;

如何在悬停时用伪类的内容替换div的内容

1 个答案: