Question

我想围绕悬停的菜单元素制作边框，我有一个问题，当我悬停其余菜单元素正在向右移动，因为我使用填充，我怎么能让它保持固定？

.menu ul li {
  display: inline-block;
}

.menu li {
  line-height: 152px;
  font-size: 14px;
  padding-left: 40px;
  text-transform: uppercase;
}

.menu a {
  color: #000;
}

.menu li a.active {
  color: #4bcaff;
}

.menu li a:hover {
  border: 1px solid red;
  padding: 5px;
}

<nav class="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

您应该将padding设置为<a>元素的常规状态而不是:hover。 :hover状态继承常规状态的padding。所以padding和＆＃34;大＆＃34;闪烁的问题应该消失。

避免＆＃34;小＆＃34; :hover状态的闪烁问题，由您必须将常规状态设置为不可见边框（具有相同border-width）的附加边框引起。

使用＆＃34;占位符边框＆＃34;查看以下解决方案。和border：

＆＃13;

.menu ul li {
  display: inline-block;
  line-height: 152px;
  font-size: 14px;
  padding-left: 40px;
  text-transform: uppercase;
}
.menu a {
  color: #000;
  padding: 5px;
  border: 1px solid transparent;
}
.menu li a.active {
  color: #4bcaff;
}
.menu li a:hover {
  border: 1px solid red;
}

＆＃13;

<nav class="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

＆＃13;

没有＆＃34;占位符边框的另一种解决方案＆＃34;和border，使用box-shadow：

＆＃13;

.menu ul li {
  display: inline-block;
  line-height: 152px;
  font-size: 14px;
  padding-left: 40px;
  text-transform: uppercase;
}
.menu a {
  color: #000;
  padding: 5px;
}
.menu li a.active {
  color: #4bcaff;
}
.menu li a:hover {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
  box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
}

＆＃13;

<nav class="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

我建议进行三项修改（第三项是真正解决您问题的方法）：

box-sizing: border-box - 使样式更加一致和直观。
删除padding，然后为margin元素添加li。请记住，padding是从内容到元素边框的额外空间; margin但是在边框之外还有额外的空间，因此最好在项目之间放置一些空格。
不仅在悬停时添加padding元素的a，还为其常规状态添加* { box-sizing: border-box; } .menu ul li { display: inline-block; } .menu li { line-height: 152px; font-size: 14px; margin-left: 40px; text-transform: uppercase; } .menu a { color: #000; padding: 5px; } .menu li a.active { color: #4bcaff; } .menu li a:hover { border: 1px solid red; padding: 4px; };然后在悬停时，使填充1px更小，以便增加1px边框。

＆＃13;

<nav class="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

＆＃13;

import UIKit  
import UserNotifications  
import Firebase  
import FirebaseInstanceID  
import FirebaseMessaging  
import SystemConfiguration

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate , UNUserNotificationCenterDelegate, MessagingDelegate{

var window: UIWindow?    

func messaging(_ messaging: Messaging, didRefreshRegistrationToken fcmToken: String) {
    print("Firebase registration token: \(fcmToken)")
}

func application(_ application: UIApplication,
                 didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Messaging.messaging().apnsToken = deviceToken as Data
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    if #available(iOS 10.0, *) {
        // For iOS 10 display notification (sent via APNS)
        UNUserNotificationCenter.current().delegate = self

        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(
            options: authOptions,
            completionHandler: {_, _ in })
    } else {
        let settings: UIUserNotificationSettings =
            UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
        application.registerUserNotificationSettings(settings)
    }

    application.registerForRemoteNotifications()


    DispatchQueue.main.async {

        Messaging.messaging().subscribe(toTopic: "news")
    }

    FirebaseApp.configure()


    return true
 }
}

＆＃13;

如何在菜单元素上悬停时制作边框

2 个答案: