Question

I am trying to redesign the look of the mobile menu on my Wordpress theme. I have most of the css done but I would like to have a border-bottom appear when you hover over the menu. I have tried to add this to the <a> tag but it underlines the whole div rather than just the text. Using the inspect tool, I see I need to target the <font> tag that is within the <a> tag but how do I apply the hover attribute to it?

Here is a basic example to explain the structure of the theme's menu.

<div id="menu-wrap">
    <ul id ="menu">
        <li class="menu-item>
            <a class="menu-link" href="www.website.com/link">
                <font style> Link Name </font>
            </a>
        </li>
    </ul>
</div>

Answer 1

字体元素~~已弃用~~ 已废弃。有关详情，请访问MDN的网站：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

我建议使用span标记并定位范围，例如.menu-link:hover span。

Answer 2

a font:hover{}

如果a标签中只有字体标签，那么你可以使用上述格式或者特别是那个字体标签你可以使用.menu-link font:hover{}

Answer 3

您可以使用：悬停以创建悬停下划线效果

    create table createdb
    (
    dbname varchar(100),
    createdbscript varchar(max)
    )

    DECLARE 
    @query as varchar(max), @NUM AS INT
    SET @NUM = 1
    CREATE TABLE #db_names(dbname varchar(250))

    WHILE(@NUM <1001)
    BEGIN
        INSERT INTO #db_names values('NUM'+cast(@NUM as varchar))
        SET @NUM = @NUM+1
    END

    SET @query = ''
    insert into createdb 
    SELECT dbname, @query + 'CREATE DATABASE [' + dbname + ']  
            CONTAINMENT = NONE
            ON  PRIMARY 
                ( NAME = N''' + dbname + ''', 
                  FILENAME = N''c:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\' + dbname +'.mdf'' , 
                  SIZE = 10240KB , 
                  FILEGROWTH = 1024KB )
            LOG ON 
                ( NAME = N''' + dbname + '_log''' +', 
                  FILENAME = N''c:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\' + dbname + '_log' +'.ldf'' , 
                  SIZE = 512KB , 
                  FILEGROWTH = 256KB )
    ' FROM #db_names

    select * from createdb
    drop table #db_names

Answer 4

您在"课程中遗漏了menu-item，这可能会破坏边框的渲染。

对于悬停时的字体底部边框，您可以执行以下操作：

＆＃13;

.menu-link font:hover {
    border-bottom: aqua solid ;
}

// Or 

a font:hover {
    border-bottom: aqua solid ;
}

＆＃13;

<div id="menu-wrap">
    <ul id ="menu">
        <li class="menu-item">
            <a class="menu-link" href="www.website.com/link">
                <font style> Link Name </font>
            </a>
        </li>
    </ul>
</div>

＆＃13;

另外，您不应该使用font标记，因为它在HTML5中是depreciated / not supported。

如何定位<a> tag and use hover effect?

4 个答案: