Question

我不确定是否能够仅使用CSS和HTML来实现此功能，还是不确定是否需要使用Javascript，因为经过一段时间的研究，我并没有发现太多有关如何执行此操作的信息。

由于我不确定如何处理该问题，所以我没有做任何尝试。

CSS：

        * {
    	font-family: Montserrat;
    	margin: 0;
    }
    
    .menu {
    	text-align: center;
    	color: white;
    	width: 100%;
    	height: 80px;
    	background-color: white;
    	padding-top: 1%;
    	box-shadow: 10px -120px 900px 117px rgba(0,89,255,1);
    }
    
    ul {
    	color: black;
    	list-style: none;
    	margin-top: 1%;
    	font-size: 20px;
    }
    
    li {
    	text-decoration: none;
    	display: inline;
    	margin-left: 5%;
    	border-radius: 55px;
    	border-color: #005cff;
    	border-style: solid;
    	border-width: 3px;
    	padding: 0.2% 3% 0.2% 3%;
    	background-size: 200% 100%;
        background-image: linear-gradient(to left, #62EF62 50%, white 50%);
        -webkit-transition: background-position 2s;
        -moz-transition: background-position 2s;
        transition: 2s;
    }
    
    .first-title:hover {
    	padding: 0.2% 6% 0.2% 6%;
    	color: #005cff;
    	font-size: 25px;
    	background-position: 444.7 0%;
    
    }
    
    .second-title:hover {
    	padding: 0.2% 6% 0.2% 6%;
    	color: #005cff;
    	font-size: 25px;
    	background-position: 303 0%;
    
    }
    
    .third-title:hover {
    	padding: 0.2% 6% 0.2% 6%;
    	color: #005cff;
    	font-size: 25px;
    	background-position: 332 0%;
    
    }
    
    .sticky {
      position: fixed;
      top: 0;
      width: 100%
    }
    
    .logo {
    	float: left;
    	margin-top: 1%;
    	margin-left: 20px;
    	width: 200px;
    	height: 64px;
    	transition: 2s;
    }
    
    .logo:hover {
    	width: 260px;
    	height: 83px;
    	margin-top: 0.5%;
    	margin-left: 10px;
    }

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    </head>
    <body>
    	<header class="sticky">
    	<img class="logo" src="images/logo.png">
    	<div class="menu">
    		<ul>
    			<li class="first-title">O que é o Artigo 19?</li>
    			<li class="second-title">Portfólio</li>
    			<li class="third-title">Entrevistas</li>
    		</ul>
    	<div>
    	</header>
    <div class="box1"></div>
    </body>
</html>

我的目标是将鼠标悬停在列表元素上，使其下降到锚点。

Answer 1

执行此操作最兼容的方法是链接到锚点，在锚点上模拟单击“悬停”其他一些元素。

例如：

<div id="somewhere">...</div>
...
<a id="gotoSomewhere" href="#somewhere">...</a>
...
<div onmouseover="document.getElementById('gotoSomewhere').click();">...</div>

https://jsfiddle.net/pgtozf25/

如何使用悬停移动到锚点？

1 个答案: