Question

我有两个问题：

1）如何让开始按钮起作用。我的想法是，如果单击“开始”，它将跳转到我编写的文本。

2）标头中的悬停功能不起作用。它曾经可以工作，但现在却不行，所以我有点困惑。

任何人都可以帮助我解决我缺少的东西的问题。

谢谢

body {
    /*geld voor alles */
    height: 100%;
    margin: 0;
}

.centered {
    /* maak tekst in het midden*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header {
    /*balk boven aan gemaakt met w3schools en hulp van forums */
    background-color: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 5px 20px;
    margin-top: 30px;
}

.content {
    /* geen idee stond op w3schools */
    padding: 16px;
}

.sticky {
    /* voor de header*/
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    /* voor de header */
    padding-top: 102px;
}

.logo {
    /* logo linksboven */
    Width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
    float: left;
}

h1.startdereis {
    /* tekst met start de reis */
    color: white;
    text-transform: uppercase;
    font-size: 70px;
    text-align: center;
    margin-top: -80px;
    font-family: sans-serif;
}

.straatfoto {
    /* de straat met een donker filter */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.knop {
    /* start knop */
    margin-top: 30px;
    margin-left: 550px;
}

.knop1 {
    /* start knop*/
    border: 3px solid white;
    padding: 10px 30px;
    color: white;
    text-decoration: none;
    margin-right: 5px;
    font-size: 13px;
    text-transform: uppercase;
    background-color: darkorange;
    font-family: "Roboto", sans-serif;
    margin-left: -300px;
}

.hoofd-nav {
    /* voor de header */
    float: right;
    list-style: none;
    margin-top: 30px;
    padding-right: 100px;
}

.hoofd-nav li {
    /* voor de header */
    display: inline-block;
}

.hoofd-nav li a {
    /* voor de header */
    color: white;
    text-decoration: none;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    border: 3px solid transparent;
}

.hoofd-nav li a.actief {
    /* maakt een vierkantje om de actieve onderwerp */
    border: 3px solid white;
}

.hoofd-nav li a:hover {
    ?
    /* maakt een blokje als je er overheen gaat */
    border: 3px solid white;
}

.voorstellen
{
    max-width: 600px;
    font-size: 18px;
    color: Black;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    font-family:sans-serif;
}

<!DOCTYPE html>
<html>

<head>
    <title> Duco's Blog </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<header>
    <div class="header" id="myHeader">
        <img class="logo" src="leeuw.png">
        <ul class="hoofd-nav">
            <li><a href="" class="actief"> Home </a></li>
            <li><a href=""> Voorstellen </a></li>
            <li><a href=""> Hobby's </a></li>
            <li><a href=""> Toekomstdromen </a></li>
        </ul>
    </div>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

    </script>
</header>

<body>
    <div class="container">
        <div class="straatfoto"></div>
        <div class="centered">
            <h1 class="startdereis">Start De Reis</h1>
            <div class="knop">
                <a href="" class="knop1"> Start </a>
            </div>
        </div>
    </div>
    <div class="voorstellen">
        <h2>Wie ben ik?</h2>
        <p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was sprak ik nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Op het moment dat ik in de tweede wat Duits had geleerd en ook echt zelf wat kon zeggen tegen mijn oma i.p.v dat mijn ouder het zouden vertalen stierf mijn oma jammer genoeg.
            <br><br>
            Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon een doodgewoon gezin.
            <br><br>

    </div>

</body>

</html>

Answer 1

您可以通过在文本div中添加一个ID并将开始按钮的链接更改为#yourid来解决此问题。

这是一个工作示例：

<!DOCTYPE html>
<html>

<head>
    <title> Duco's Blog </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<header>
    <div class="header" id="myHeader">
        <img class="logo" src="leeuw.png">
        <ul class="hoofd-nav">
            <li><a href="" class="actief"> Home </a></li>
            <li><a href=""> Voorstellen </a></li>
            <li><a href=""> Hobby's </a></li>
            <li><a href=""> Toekomstdromen </a></li>
        </ul>
    </div>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

    </script>
</header>

<body>
    <div class="container">
        <div class="straatfoto"></div>
        <div class="centered">
            <h1 class="startdereis">Start De Reis</h1>
            <div class="knop">
                <a href="#textjump" class="knop1"> Start </a>
            </div>
        </div>
    </div>
    <div class="voorstellen" id="textjump">
        <h2>Wie ben ik?</h2>
        <p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was sprak ik nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Op het moment dat ik in de tweede wat Duits had geleerd en ook echt zelf wat kon zeggen tegen mijn oma i.p.v dat mijn ouder het zouden vertalen stierf mijn oma jammer genoeg.
            <br><br>
            Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon een doodgewoon gezin.
            <br><br>

    </div>

</body>

</html>

duration

跳到html / css中的某个位置

1 个答案: