html -

不同时间的边界转换

转载作者：行者123 更新时间：2023-11-28 06:06:09

27

4

我正在尝试创建这个按钮式的东西，它是一个白色的 h1，里面有一个链接，有一个 5px 的白色边框，我希望整个东西都充当一个链接，包括边框。我设法使所有过渡都正确，但由于边框和实际链接在某种程度上是分开的，当您将鼠标悬停在边框上时它不会影响链接文本并且单击它不会带您到任何地方。

这是我的代码:

body, html{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;

}

ul a {
	position: relative;
	display: inline-block;
	margin: 15px 25px;
	outline: none;
	color: #f5f5f5;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
  font-size: 26px;
  z-index:
}

ul a:hover,
ul a:focus {
	outline: none;
  z-index:
}


ul {
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  height: 10%;
  width: 35%;
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

ul li {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

li {
  flex: 1;
  font-weight: 200;
  font-family: 'Oswald', sans-serif;
  font-size: 18pt;
}


li a {
  outline: none;
	padding: 8px 0;
}

li a::after {
  outline: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: #eb4f43;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

li a:hover::after,
li a:focus::after {
  outline: none;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.logo {
  margin-top: 1.75%;
  height: 50%;
  width: 50%;
}

.i1, .i2, .i3 {
  display: flex;
  height: 100%;
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
}

.i2 {
  background-color: #333;
}


#ptitle {
  display: flex;
  font-weight: 500;
  font-family: 'Oswald', sans-serif;
  color: #f5f5f5;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  position: absolute;
  top: 45%;
  left: 50%;
}

#prole {
  display: flex;
  font-weight: 200;
  font-family: 'Oswald', sans-serif;
  color: #f5f5f5;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
}

h1 a {
  text-decoration: none;
  outline: none;
  color: #f5f5f5;
  font-size: 28pt;
}

.plink a,
.plink {
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	transition: color 0.2s;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;  
}

.plink a:hover::before,
.plink a:focus::before {
	color: #f5f5f5;
}

.plink a:hover,
.plink a:focus,
.plink:hover,
.plink:focus {
	color: #eb4f43;
}

.plink:hover,
.plink:focus {
  border: 4px #eb4f43 solid;
}

.plink {
  display: flex;
  font-weight: 200;
  font-family: 'Oswald', sans-serif;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  position: absolute;
  top: 46.1%;
  left: 15%;
  border: 4px #f5f5f5 solid;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 0.8%;
  padding-bottom: 1%;

}

<html> 
  <body>
    <div class="header">

      <ul>
        <li><a id="navlink" href="#">PROJECTS</a></li>
        <li><a id="navlink" href="#">CLIENTS</a></li>
        <li><img class="logo" src="logo.png" href="logo.png"></li>
        <li><a id="navlink" href="#">ABOUT</a></li>
        <li><a id="navlink" href="#">CONTACT</a></li>
      </ul>

    </div>

    <div class="i1">
      <div>
        <h1 class="plink"><a href="#">LEARN MORE</a></h1>
        <h1 id="ptitle">PROJECT: MOVIES</h1>
        <h1 id="prole">UI/UX</h1>
      </div>

      <div class="image">
        <img src="http://thechangingperspectiveblog.com/wp-content/uploads/2010/11/MOUNTAINS-4-of-11.jpg">
      </div>
    </div>
    
  </body>
</html>

这是我认为我搞砸了的部分:

.plink a,
.plink {
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    transition: color 0.2s;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;  
}

.plink a:hover::before,
.plink a:focus::before {
    color: #f5f5f5;
}

.plink a:hover,
.plink a:focus,
.plink:hover,
.plink:focus {
    color: #eb4f43;
}

.plink:hover,
.plink:focus {
  border: 4px #eb4f43 solid;
}

它是关于“了解更多”“按钮”的

最佳答案

您应该将所有样式放在.plink a 上，避免将样式放在.plink 上。

h1 a {
  text-decoration: none;
  outline: none;
  color: #f5f5f5;
  font-size: 28pt;
}

.plink a {
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	transition: color 0.2s;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;  
  
  border: 4px #f5f5f5 solid;
}

.plink a:hover::before,
.plink a:focus::before {
	color: #f5f5f5;
}

.plink a:hover,
.plink a:focus {
	color: #eb4f43;
  
  border: 4px #eb4f43 solid;
}

.plink {
  display: flex;
  font-weight: 200;
  font-family: 'Oswald', sans-serif;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  position: absolute;
  top: 46.1%;
  left: 15%;
}

<h1 class="plink"><a href="#">LEARN MORE</a></h1>

关于html - <h1><a> 不同时间的边界转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36435373/

27

4

0

文章推荐： html - 当我使用 'transform' 时容器大小与内容不一样

文章推荐： html - 修复了带有水平菜单项的 Bootstrap 中的响应容器

文章推荐： css - 电子邮件模板在 hotmail 中不显示背景图片

iphone - 边界] 横向时不改变
我编写了一个应用程序，它有一个 UIViewController，它在纵向模式下显示另一个 UIViewController，在横向模式下显示不同的 UIViewController。当我去风景时，
iphone - UISegmentedControl 边界
我想为 UISegmentedControl 提供以下方面: 注意灰色背景 View ，以及分段控件未选定项目的白色背景。但是，如果我为 UISegmentedControl 提供白色背景，我会得到
javascript - 可排序的容器/边界
我正在尝试为我的可排序项目创建边界。我看过这个问题/答案: jquery sortable keep within container Boundary 并尝试将我的 JS 以此为基础，但无论出于何种
Java JFrame 边界
我正在尝试编写执行以下操作的代码:如果我单击起始位置为 (100,100) 的字符串 C(JLabel)，该字符串将在 JFrame 的边界内移动。代码本身并不难实现，但我遇到了问题为 JLabel
应用约束后快速获取 View 边界
我有一个 .xib 文件，其中包含我想用来播放视频文件的 View 。该 View 具有配置其大小和位置的约束。现在我需要获取这些来配置我的视频播放器: let slide1: OnboardingS
swift - MKMapView 边界
我将从 Google map 转到 Apple map 。 Google map 能够根据东北和西南坐标更新相机，如下所示: let bounds = GMSCameraUpdate.fit(GMSC
Android 为我的图片添加圆角线？边界
这个问题在这里已经有了答案: Border over a bitmap with rounded corners in Android (6 个答案) 关闭 6 年前。如何为我的图片添加圆角边框？
Java AWT 边界
我有一个任务是使用java.awt.Graphics绘制一定数量的圆圈。绘制圆圈相当简单，但我只应该在圆圈出现在可见区域内时绘制圆圈。我知道我可以调用方法 getClipBounds() 来确定绘图
html - 过渡方向 - 边界
我在设置过渡时遇到问题，目前它是从上到下(它是悬停时显示的边框)。我希望过渡从中间开始并传播到侧面，或者至少从任何一侧开始并传播到另一侧... 我的导航菜单 anchor 使用导航链接类! * {
C++: vector 边界
我来自 Java，目前正在学习 C++。我正在使用 Stroustrup 的 Progamming Principles and Practice of Using C++。我现在正在使用 vecto
C++循环展开，边界
我有一个要展开的循环: for(int i = 0; i < N; i++) do_stuff_for(i); 展开: for(int i = 0; i < N; i += CHUNK) {
与子类型一起使用的 Scala View 边界？
Scala 中是否有类似 View 绑定(bind)但可以匹配子类型的东西？由于 Scala 中的 View 没有链接，我目前有以下内容: implicit def pimpIterable[A,
javascript - map 边界!如何检查地址是否位于边界内？
网站用户输入地址。如果地址在边界内，则“合格”。如果地址超出边界，则“不合格”。是否有现有的小部件或代码可以执行此操作？有人知道实现这一目标的第一步吗？感谢您的任何意见。最佳答案哇，反对票是怎
haskell - 加密和 ByteString 边界
我有以下测试应用程序: import Codec.Crypto.AES import qualified Data.ByteString.Char8 as B key = B.pack "Thisis
java - JFrame - 设置位置/边界？
我正在尝试添加一个 JButton，但它与进度条水平对齐。如何将 JButton 对齐到下面的线上？另外，我试图将所有组件分组到不同的组中，但我不确定如何执行此操作。有谁知道吗？最佳答案要简单分
python - 查找相框的 Canvas 边界
假设我们有一个像上面这样的相框。从中心开始，如何找到可用于绘制的面积最大的矩形(矩形中的所有像素必须为 rgb(255,255,255)？我需要找到图中所示的A点和B点的x和y坐标。我的方法之一是
c# - 类(class)边界
这可能是一个愚蠢的问题，但当我创建一个类时，我应该如何正确设置其中属性的边界。例子:如果我有这门课 class Product { private string name; publ
javascript - 如何获得 map 边界？
我正在从 leaflet 迁移回来，如果我需要 map 绑定(bind)，我使用以下代码: var b = map.getBounds(); $scope.filtromapa.lat1 = b.ge
ios - UIView 边界/框架与绘制矩形不匹配
我正在学习如何创建自定义 UIView。我正在制作的这个特定 View 包含几个按钮。我注意到，当我从惰性实例化 block 中调用frame/height属性时，我得到的值是128，但是当我调用dr
java - 反转 JFrame 边界
我正在尝试制作一个弹跳球。设置的边界允许球在超出框架边界后从起点开始。我无法让球弹起来。一旦击中边界(框架的外边缘)，如何让球弹起？我相信问题出在 moveBall() 方法中。主类导入 java

首页

博学

6Ren·AI

商城

html -

不同时间的边界转换