Question

实际上我是网络开发的新手，这个问题可以很容易，但请帮助我。谁可以提供帮助的人。我正在尝试按下按钮时制作一些下拉菜单。怎么了？

＆＃13;

.clicker {
    border: none;
    height: 30px;
    width: 120px;
    background-color: orange;
    color: blue;
    cursor: pointer;
    border-radius: 5px;
    position: absolute;
}
.dropdownKeeper {
    display: none;
    position: relative;
    top: 15px;
    left: 150px;
}
button:hover .dropdownKeeper {
    display: block;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>a</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <button class="clicker">Click Me</button>
        <div class="dropdownKeeper">
            <a href="#">ajsghj</a>
            <a href="#">ajsghj</a>
            <a href="#">ajsghj</a>
        </div>
    </body>
</html>

＆＃13;

Answer 1

你可以这样做：

button:hover~.dropdownKeeper{
      display: block;
}

http://www.w3schools.com/css/css_combinators.asp

Answer 2

最好在css文件中使用classname，因为你的网站中应该只有一个按钮。

button.clicker:hover + .dropdownKeeper {
    display: block;
}

Answer 3

＆＃13;

<!-- 1. Add ngMask plugin after your AngularJS. -->
<script src="angular.min.js"></script>
<script src='ngMask.min.js'></script>

<!-- 3. Use the avaiable patterns to create your mask. Set the mask attribute. -->
<input type='text' ng-model='maskModel' mask='39/19/9999' />

<!-- 4. Adjust your mask options. -->
<input type='text' ng-model='maskModel' ng-value='0/3/9' mask='3/9?' mask-repeat='2' mask-restrict='accept' mask-clean='true' mask-validate='false' mask-limit='false' />

＆＃13;

.clicker {
    border: none;
    height: 30px;
    width: 120px;
    background-color: orange;
    color: blue;
    cursor: pointer;
    border-radius: 5px;
    position: absolute;
}
.dropdownKeeper {
    display: none;
    position: relative;
    top: 15px;
    left: 0px;
  background:grey;
   width: 120px;
  text-align:center;
}
button:hover~.dropdownKeeper{
      display: block;
}
.dropdownKeeper a{
  display:block;
}
button:hover .dropdownKeeper {
    display: block;
}

＆＃13;

Answer 4

＆＃13;

.clicker{
	border: none;
	height: 30px;
	width: 120px;
	background-color: orange;
	color: blue;
	cursor: pointer;
	border-radius: 5px;
	position: absolute;
}

#dropdownKeeper{
	display: none;

    top: 15px;
    left: 150px;
}

button:hover + #dropdownKeeper{
	display: block;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>a</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<button class="clicker">Click Me</button>
	 <select class="form-control" style="float:right" id="dropdownKeeper"  >
                        <option value="">--Select--</option>
                    </select>


</body>
</html>

＆＃13;

使用CSS HOVER制作最简单的下拉菜单

4 个答案: