Question

在下面的代码中，我希望.dropright - div（包含文本：“This is dropright”出现在.main div的右侧（包含文本：“这是主文本。”每当我徘徊在.main上它就没有发生。原因可能是什么。

html,
body {
    margin: 0px;
    height: 100%;
    /* [disabled]width: 100%; */
    left: 0px;
    top: 0px;
    background-color: rgba(255, 255, 255, 1);
}
a {
    text-decoration: none;
}
.wrapper {
    text-align: center;
    margin-top: 0;
    margin-left: auto;
    height: 100%;
    max-width: 960px;
    background-color: rgba(0, 0, 0, 1);
    margin-right: auto;
    position: relative;
}
.main {
    height: auto;
    width: 25%;
    color: rgba(255, 255, 255, 1);
    margin-right: auto;
    margin-left: auto;
    background-color: rgba(204, 204, 204, 1);
    border: thin solid rgba(255, 255, 255, 1);
    display: inline-block;
}
.dropright {
    background-color: rgba(0, 0, 255, 1);
    height: auto;
    width: 25%;
    display: none;
    position: absolute;
    margin-left: 2.5%;
}
.main a:hover {
    text-decoration: underline;
}
.main:hover .dropright {
    display: inline-block;
}

<div class="wrapper">
    <div class="main">
        <a href="http://www.hotmail.com">This is main text.</a>
    </div>
    <div class="dropright">This is dropright</div>
</div>

Answer 1

您需要更改此课程。 Demo

.main a:hover .dropright {
    display: inline-block;  
}

TO

.main:hover + .dropright {
    display: inline-block;  
}

Answer 2

html,body {
    	margin: 0px;
    	height: 100%;
    	/* [disabled]width: 100%; */
    	left: 0px;
    	top: 0px;
    	background-color: rgba(255,255,255,1);
    }

a {
	text-decoration: none;	
}
    .wrapper {
    	text-align: center;
    	margin-top: 0;
    	margin-left: auto;
    	height: 100%;
    	max-width: 960px;
    	background-color: rgba(0,0,0,1);
    	margin-right: auto;
    	position: relative;
    }

    .main {
	height: auto;
	width: 50%;
	color: rgba(255,255,255,1);
	margin-right: auto;
	margin-left: auto;
	background-color: rgba(204,204,204,1);
	border: thin solid rgba(255,255,255,1);
	display: inline-block;
    }

.dropright {
	background-color: rgba(0,0,255,1);
	height: auto;
	width: 25%;
	display: none;
	/* [disabled]position: absolute; */
}

.main a:hover {
	text-decoration: underline;
}

.dropdown-box:hover .dropright {
	display: inline-block;	
}

<div class="wrapper">

  <div class="dropdown-box">
  <div class="main">
    <a href="http://www.hotmail.com">This is main text.</a>
    </div>
   <div class="dropright">This is dropright</div>
   </div>
</div>
    
    
    

  </div>
</div>

Answer 3

在主要课程上检查此代码是否悬停：

＆＃13;

 
html,body {
      margin: 0px;
      height: 100%;
      /* [disabled]width: 100%; */
      left: 0px;
      top: 0px;
      background-color: rgba(255,255,255,1);
    }

a {
  text-decoration: none;  
}
    .wrapper {
      text-align: center;
      margin-top: 0;
      margin-left: auto;
      height: 100%;
      max-width: 960px;
      background-color: rgba(0,0,0,1);
      margin-right: auto;
      position: relative;
    }

    .main {
  height: auto;
  width: 50%;
  color: rgba(255,255,255,1);
  margin-right: auto;
  margin-left: auto;
  background-color: rgba(204,204,204,1);
  border: thin solid rgba(255,255,255,1);
  display: inline-block;
    }

.dropright {
  background-color: rgba(0,0,255,1);
  height: auto;
  width: 25%;
  display: none;
  /* [disabled]position: absolute; */
}

.main a:hover {
  text-decoration: underline;
}

.main:hover .dropright {
  display: inline-block;  
}

＆＃13;

 <!DOCTYPE html>
<html lang="en">

<body>
<div class="wrapper">


  <div class="main">
    <a href="http://www.hotmail.com">This is main text.</a>
    
   <div class="dropright">This is dropright</div>
   </div>
</div>
    
    
    

  </div>
</div>
</body>
</html>

＆＃13;

Answer 4

您正在尝试执行需要jQuery或Javascript的操作。

$(document).ready(function() {
    $('.main').on('mouseenter', function() {
        $('#right').addClass('dropright');
    });
});

css下拉div不会出现在悬停

4 个答案: