troubleshooting jquery

app.js

$(document).ready(function() {
    alert("jquery is working!");
    $('.article-table-row').on('mouseenter', function() {
        $(this).addClass('.hovered');
        $(this).children().css('background-color', 'transparent');
        $(this).find('.list-item')
    });

    $(".article-table-row").on('mouseleave', function() {
        $(this).removeClass('.hovered');
    });
});

base.css

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #EEEEEE;
}

.article-list {
    width: 100%;
    height: 100%;
    display: table-row;
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    /*margin-top: 15px;*/
    /*margin-bottom: 15px;*/
}

.article-list:nth-child(even) {
    background-color: #EEEEEE;
}

.article-list:nth-child(odd) {
    background-color: #d6d6d6;
}

.list-container {
    padding: 200px;
}

.list-item {
    color: #292929;
    /*padding-left: 20px;*/
    /*border: 1px solid #000000;*/
    /*margin-left: 15px;*/
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    display: table-cell;
    /*display: table-cell;*/
    /*margin-bottom: 10px;*/
}

.article-table {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

.article-table-header {
    padding-bottom: .5rem;
}

.article-table-row {
    padding: 5px;
}

.article-table-row:nth-child(even) {
    background-color: #EEEEEE;
}

.article-table-row:nth-child(odd) {
    background-color: #d6d6d6;
}

.article-table-definition {
    padding: .5rem;
}

.hovered {
    background-color: #444444 !important;
}

main.html

{% extends "base.html" %}

{% block head %}
    {{ super() }}

{% endblock %}

{% block body %}
    <div class="list-container">
        <table class="article-table">
            <thead>
            <tr>
                <th class="article-table-header">Article</th>
                <th class="article-table-header">Tags</th>
                <th class="article-table-header">Time</th>
            </tr>
            </thead>
            <tbody>
            {% for x in articles %}
                <tr class="article-table-row">
                    <td class="article-table-definition">{{ x['article'] }}</td>
                    <td class="article-table-definition">{{ x['tag'] }}</td>
                    <td class="article-table-definition">{{ x['time'] }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <script type="application/javascript" charset="utf8" src={{ url_for('static', filename='jquery/dist/jquery.min.js') }}></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
    <script type="application/javascript" charset="utf8" src={{ url_for('static', filename='app.js') }}></script>

{% endblock %}