diff --git a/static/css/main.css b/static/css/main.css
index dbe18fa..451c877 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -291,8 +291,18 @@ h1 > div {
     background-color: var(--hover-bg);
 }
 
+.file-name-col {
+    cursor: pointer;
+    user-select: none;
+}
+
+.file-name-col:hover {
+    background-color: var(--hover-bg);
+}
+
 .file-icon {
     margin-right: 8px;
+    pointer-events: none;
 }
 
 .folder {
diff --git a/templates/index.html b/templates/index.html
index 869bc54..fe5dfeb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -77,13 +77,19 @@ current_prefix }}"{% endblock %} {% block content %}
                         aria-label="选择 {{ entry.name }}"
                     />
                 </td>
-                <td class="file-name-col">
+                <td
+                    class="file-name-col"
+                    onclick="{% if entry.is_dir %}window.location.href='/{{ entry.key.rstrip('/') }}'{% else %}window.open('{{ entry.file_url }}', '_blank'){% endif %}"
+                    style="cursor: pointer"
+                >
                     {% if entry.is_dir %}
                     <i class="file-icon folder fas fa-folder"></i>
-                    <a href="/{{ entry.key.rstrip('/') }}">{{ entry.name }}</a>
+                    <a href="/{{ entry.key.rstrip('/') }}" onclick="event.stopPropagation();">{{ entry.name }}</a>
                     {% else %}
                     <i class="file-icon file {{ entry.name|fileicon }}"></i>
-                    <a href="{{ entry.file_url }}" target="_blank">{{ entry.name }}</a>
+                    <a href="{{ entry.file_url }}" target="_blank" onclick="event.stopPropagation();"
+                        >{{ entry.name }}</a
+                    >
                     {% endif %}
                 </td>
                 <td class="file-size-col file-size">