功能悬停+功能正常的jss问题答案

【问题标题】：function hover + function normal jss issues功能悬停+功能正常的jss问题
【发布时间】：2021-07-30 11:17:36
【问题描述】：

我目前正在尝试代码学院 5 天挑战赛，但似乎找不到哪里出错了？运行测试后多次失败，例如“您是否在准备悬停功能的主体内设置了字体大小等......其他功能也是如此。

```
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tea Recipe</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" /> 

    
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
    <body>
        <div id="container">
            <header>
                <h1>How to make Tea</h1>
            

            </section>
            
            <section onmouseover="preparationHover()" onmouseout="preparationNormal()">
                <h2>preparation <i id="preparation" class="fa fa-check-circle" aria-hidden="true"></i></h2>
                
            </section>
            
            <footer>
                <p>Copyright Me 2020</p>
            </footer>
        </div>
        <script>
        
        function ingredientsHover() {


            document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontsize = '300%' ;

        }


        function ingredientsNormal() {


            document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontsize = '100%' ;
            
        }


        function PreparationHover() {document.getElementById('Preparation').firstElementChild.firstElementChild.style.fontsize = '300%';
    
        }

        function PreparationNormal() {


            document.getElementById('Preparation').firstElementChild.firstElementChild.style.fontsize = '100%';

        }
            
        </script>
    </body>
</html>

thanks 

matt

    ```<html>
  ```<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tea Recipe</title>
    <!-- add the font awesome link here -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" /> 
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
    <body>
        <div id="container">
            <header>
                <h1>How to make Tea</h1>
            
    
                <p>At the very least, tea is a flavourful way of getting enough fluid into your body each day.
            On top of that, studies have shown teas can help protect your teeth and your heart</p>
    
            </header>
            
            <section onmouseover="ingredientsHover()" onmouseout="ingredientsNormal()">
                <!-- add a fontawesome icon here -->
                <h2>ingredients <i id="ingredients" class="fa fa-coffee" aria-hidden="true"></i></h2>
                <ul>
                    <li>Tea Bag</li>
                    <li>Water</li>
                    <li>Milk - Dairy/Plant based(Optional)</li>
                    <li>Sugar/Honey (Optional)</li>
                </ul>
            </section>
            
            <section onmouseover="preparationHover()" onmouseout="preparationNormal()">
                <!-- add a fontawesome icon here -->
                <h2>preparation <i id="preparation" class="fa fa-check-circle" aria-hidden="true"></i></h2>
                <ol>
                    <li>
                    Run the tap a little so the water's nicely aerated, and only boil it once to keep the oxygen level up. Oxygen in water helps flavour!
                    </li>
                    <li>
                        Pop a tea bag into your mug (<em>always</em> a big mug)
                    </li>
                    <li>
                        Pour the hot water over the tea bag and stir briefly.
                    </li>
                    <li>
                        Tea needs time to unlock all its flavour, so give it 3-4 minutes to do its thing. This is a perfect time to grab a sneaky cookie or daydream about vacations.
                    </li>
                    <li>
                        Before removing the tea bag, gently squish it with a spoon against the side of the mug. Not too much or you'll make it bitter.
                    </li>
                    <li>
                        If you want, throw in some milk or sugar or honey or nothing else at all.
                    </li>
                    <li>
                        Enjoy!
                    </li>
                </ol>
            </section>
            
            <footer>
                <p>Copyright Me 2020</p>
            </footer>
        </div>
        <script>
        
        Function ingredientsHover() {document.getElementById("ingredients").style.fontSize = "300%";
        
        Function ingredientsNormal() {document.getElementById("ingredients").style.fontSize = "100%";
        
        
        
        Function preperationHover() {document.getElementById("ingredients").style.fontSize = "300%";
        
        Function preperationNormal() {document.getElementById("ingredients").style.fontSize = "100%";
        
            
        </script>
    </body>
</html>


```

它还询问我是否创建了准备和配料悬停和正常功能，我以为我有，但我想不通

【问题讨论】：

标签： jss

【解决方案1】：

您好，响应您对 4 个函数的此请求，您的代码在脚本标记中应如下所示：

function ingredientsHover() {

document.getElementById("ingredients").style.fontsize = "300%" ; }

function ingredientsNormal() {          document.getElementById("ingredients").style.fontsize = "100%" ;

}

function preparationHover() {

document.getElementById("preparation").style.fontsize = "300%"; }

function preparationNormal() {

document.getElementById("preparation").style.fontsize = "100%"; }

附：不要忘记在该部分的

中添加您的 id 选择器

【讨论】：