Question

我有这个代码，它只是一个制作菜单的简单列表

ul li {
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  display: inline-block;
  width: 29%;
  margin: 1%;
  margin-bottom: 0;
  padding: 5px;
  -webkit-border-top-right-radius: 30px;
  -moz-border-top-right-radius: 30px;
  -ms-border-top-right-radius: 30px;
  -o-border-top-right-radius: 30px;
  border-top-right-radius: 30px;
  -webkit-border-top-left-radius: 30px;
  -moz-border-top-left-radius: 30px;
  -ms-border-top-left-radius: 30px;
  -o-border-top-left-radius: 30px;
  border-top-left-radius: 30px;
}
ul li:hover {
  box-shadow: 1px 1px 10px white;
  position: relative;
  top: 20px;
  height: 60px;
  padding-top: 1.5em;
  font-size: 20px;
}

<ul>
  <a href="#">
    <li>MENU</li>
  </a>
  <a href="#">
    <li>CARDS</li>
  </a>
  <a href="#">
    <li>CONTACT</li>
  </a>
</ul>

这会在我的菜单按钮上创建我想要的效果，但出于某种原因，padding-top和font-size部分适用于所有li，而不仅仅是hover box-shadow结束了。

如果删除那两个，ID:hover和相对定位只会影响悬停的物体。

如何让它只影响我悬停的按钮？

我知道我可以给每个按钮一个ID并使用Public Class CustomerSearchPresenter Implements ICustomerSearchPresenter Private Repo As ICustomerRepo Private View As ICustomerSearchView Public Sub New(_view As ICustomerSearchView, _customerRepo As ICustomerRepo) View = _view Repo = _customerRepo End Sub Public Sub SearchForCustomer(_customerNumber As String) Implements ICustomerSearchPresenter.SearchForCustomer 'seach the database to see if customer exists and if so create a new customer view... Dim foundCustomer As ICustomer = Repo.find(_customerNumber) If Not IsNothing(foundCustomer) Then '* Manual creation of all objects happens here - how do I change this in unity to create a new Dim cusView As New customerView Dim custPresenter As New CustomerPresenter(cusView, foundCustomer) 'custPresenter creates a new tab on the main form to display the details for that customer Else View.feedback("No customer found for " & _customerNumber) End If End Sub End Class Public Class CustomerPresenter Implements ICustomerPresenter Private View As ICustomerView Private Customer As ICustomer Public Sub New(_View As ICustomerView, _customer As ICustomer) View = _View Customer = _customer End Sub Public Sub RefreshData() Implements ICustomerPresenter.RefreshData 'do some stuff here .... End Sub End Class，但是没有更短的代码解决方案吗？

Answer 1

您的HTML 无效，您只能$> py -3 so_ctypes.py size of RawMessage: 9 buffer: b'\xfb\xfe\xff\xff\xff\xff\xff\xff\x7f' b'fbfeffffffffffff7f'作为li的直接子女

更改并删除ul规则以外的所有内容，:hover和font-size（正是您只删除的内容）并应用box-shadow padding } li

＆＃13;

ul li {
  list-style: none;
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  float: left;
  width: 29%;
  margin: 1% 1% 0;
  border-radius: 30px 30px 0 0
}
ul li a {
  padding: 5px;
  display: block;
  color: white;
  text-align: center
}
ul li:hover a {
  box-shadow: 1px 1px 10px red;
  font-size: 20px;
}

＆＃13;

Answer 2

将你的ul li包裹在div中并给该div一个类。然后瞄准那个div的ul li。

HTML

<div class="menu">
    <ul>
        <a href="#"><li>MENU</li></a>
        <a href="#"><li>CARDS</li></a>
        <a href="#"><li>CONTACT</li></a>
    </ul>
</div>

CSS

.menu ul li:hover {
    position: relative;
    top: 55px;
    height: 30px;
    background: #212;
    display: inline-block;
    width: 29%;
    margin: 1%;
    margin-bottom: 0;
    padding: 5px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-top-right-radius: 30px;
    -ms-border-top-right-radius: 30px;
    -o-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    -webkit-border-top-left-radius: 30px;
    -moz-border-top-left-radius: 30px;
    -ms-border-top-left-radius: 30px;
    -o-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
}

或定位a

.menu ul a li:hover {/* your css */}

Answer 3

首先你的HTML是错误的。 <li>应该是<ul> or <ol>的直接孩子，但您有<a href="#"><li>MENU</li></a>这个。第二，您可以像ul > li:hover{enter your styles here}这样定位悬停元素，ul li {}使用此样式ul li { vertical-align: top;}，因为您使用的是inline-block，因此您需要使用vertical-align < / p>

这里是小提琴https://jsfiddle.net/vwvsz291/

悬停更改我的所有li标签

3 个答案: