如何将:hover颜色添加到AMP下拉菜单

:hover是CSS中的一个伪类选择器，用于在鼠标悬停在元素上时改变其样式。然而，由于AMP（加速移动页面）是一种限制性的技术，不允许使用自定义CSS，因此不能直接使用:hover来添加颜色到AMP下拉菜单。

在AMP中，可以使用amp-bind组件来实现类似的效果。下面是一种将:hover颜色添加到AMP下拉菜单的方法：

首先，在AMP HTML文档的头部添加以下脚本标签，以引入amp-bind组件：<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
在下拉菜单的HTML代码中，为菜单项添加一个属性，用于绑定其样式：<amp-selector on="select:AMP.setState({ menuHover: true })"> <div class="menu-item" [class]="menuHover ? 'hovered' : ''">菜单项1</div> <div class="menu-item" [class]="menuHover ? 'hovered' : ''">菜单项2</div> <div class="menu-item" [class]="menuHover ? 'hovered' : ''">菜单项3</div> </amp-selector>
在样式表中定义.hovered类的样式，以实现鼠标悬停时的效果：<style amp-custom> .hovered { background-color: #ff0000; /* 设置悬停时的背景颜色 */ color: #ffffff; /* 设置悬停时的文本颜色 */ } </style>

通过上述步骤，当鼠标悬停在下拉菜单的菜单项上时，会触发amp-bind的事件，将menuHover属性设置为true，从而添加.hovered类的样式，实现悬停时的颜色效果。

请注意，以上示例中的颜色和样式仅供参考，您可以根据实际需求进行调整。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云云函数（https://cloud.tencent.com/product/scf）可以用于部署和运行AMP页面。

如何将:hover颜色添加到AMP下拉菜单

css、drop-down-menu、hover

我刚刚切换到我的网站AMP使用免费主题。我添加了下拉菜单CSS代码，可以很好地滚动和工作，但我不知道如何添加a:hover背景颜色#cc3333或隔离它应该指向的元素。

浏览 3提问于2018-07-13得票数 0

回答已采纳

6回答

如何使用css类更改链接的字体颜色？

html、css

我试图更改标题类中链接的字体颜色。我试着使用下面的代码，但是它影响了页面上的所有链接。我尝试过不同的安排，似乎找不到正确的方法。CSS代码 color:#ffffff;a:hover, a:focus {HTML代码 <div> <

浏览 11提问于2017-01-02得票数 0

回答已采纳

3回答

html下拉菜单颜色

html、css

我有一个带黑色的下拉菜单，我在上面悬停的时候使用了红色，我的问题是当我去下拉菜单的时候，颜色从红色变成黑色，我想要的是我在大约转红色的颜色上出现一个下拉菜单，当我转到黑色的时候，我想让颜色变成红色直到我离开下拉菜单<li>about us</li></ul> <li><a href="#">Home2</a></l

浏览 8提问于2014-04-29得票数 0

回答已采纳

2回答

下拉菜单first level不改变颜色

css、drop-down-menu

在我的导航栏中，我有一个下拉菜单。问题是，当我在菜单下拉菜单上悬停时工作正常，但当下拉菜单出现时，我们悬停在其上的菜单项颜色松动，这里是链接这是的屏幕截图

浏览 2提问于2014-04-07得票数 0

1回答

问题:悬停在下拉菜单上

css、drop-down-menu

我有一个有两列的下拉菜单，我希望块内的链接在悬停时改变颜色，但当我添加样式时，只有顶级ul元素起作用，整个块都是活动的。我已经关注这个东西太久了，不知道我需要在哪里添加li的a:hover。

浏览 2提问于2012-09-13得票数 0

2回答

如何将HTML中的下拉菜单的默认高亮颜色从蓝色更改为<select> <option>标签的其他颜色？

java、css、html

如何将HTML下拉菜单的默认高亮颜色从蓝色更改为某些其他颜色的<select><option>标签，使用一些CSS属性或Javascript？<head> <style type="text/css"> option:hover

浏览 1382提问于2018-06-04

2回答

使用html和css的下拉菜单隐藏在h1后面？

html、css、drop-down-menu、css-position、z-index

这是我第一次为导航构建下拉菜单。但是我的下拉列表出现在h1后面(这是一个英雄部分) 起作用了。.drop-down {} opacity: 1;</h1>有人能帮我弄清楚如何使下拉菜单出现在h1的前

浏览 9提问于2022-07-12得票数 0

回答已采纳

2回答

as3为每个项创建函数(在数组中？)

arrays、actionscript-3、for-loop、drop-down-menu、flash-cs6

这个想法是，用户将点击颜色按钮和包含4个按钮的电影唇将出现，所以他们可以点击其中一个按钮，以选择一个颜色。除了颜色下拉菜单，我将有12个其他属性(条纹，硬度，重量等)下拉菜单。到目前为止，这是我的颜色下拉菜单代码： hover_btn.addEventListener(MouseEvent.CLICK, drop

浏览 1提问于2013-11-19得票数 0

2回答

更改折叠下拉菜单中的文本颜色

twitter-bootstrap、drop-down-menu、twitter-bootstrap-3、navbar

在哪里可以在折叠下拉菜单中更改文本的颜色？由于某些原因，当我的下拉菜单折叠时，它有不同的背景和文本颜色。

浏览 2提问于2013-12-16得票数 2

1回答

我已经建立了一个下拉菜单，这是一个甜的，因为它得到。右键点击一个元素，打开下拉菜单，我悬停在第一个选项上，soo到目前为止还不错，字体颜色和背景色应该会发生变化，子菜单就会打开。问题是，当我悬停在子菜单上时，I“松散”的灰色背景颜色“家长”有什么想法吗？document=247&amp;dest=1&amp;obj_table=companydocument&amp;f=null" id="add_id_copy_p"

浏览 3提问于2022-01-21得票数 -1

3回答

在jQuery浏览器和火狐浏览器中，Facebook like框看起来不同

jquery、facebook、internet-explorer、google-chrome、firefox

我正在尝试添加一个类似Facebook的滑出框到一个网站上，我已经让这个机制在Chrome中工作得很好，但在Firefox和IE中，它不能完全缩回，也不能用背景颜色填充整个框。这是必要的代码：jQuery(function($) { $('#panelHandle').hover}, function() { });

浏览 1提问于2012-12-12得票数 0

4回答

如何使用:在多个类中悬停

html、css、css-selectors

我有一个css按钮样式和一些预定义的颜色样式。我使用colour类将对象着色为相同的颜色，并使用按钮样式使按钮变圆。} background: blue; border-radius: 6px; .button:hover.red

浏览 0提问于2013-04-05得票数 8

回答已采纳

2回答

更改下拉文本颜色html

html、css、drop-down-menu

我正在尝试构建一个下拉菜单，当用户在链接上盘旋时(在我的代码中为下拉菜单)时打开该菜单。我希望当下拉菜单打开时(当用户悬停在按钮或任何下拉选项上)时，按钮的背景色和文本颜色会发生变化。他们的肚脐是栗色/红色，但一旦用户悬停在按钮上，按钮的颜色就会切换到灰色(以匹配下拉菜单)，文本颜色会更改为栗色。当用户向下移动到下拉菜单时，颜色保持不变，只有当光标完全离开下拉菜单时才会返回。到目前为止，我已经成功地创建了菜

浏览 4提问于2016-06-21得票数 3

1回答

Kendo下拉更改颜色-容器列表底部的白线

c#、css、kendo-ui

我正在尝试更改Kendo的下拉列表的颜色和背景颜色。.BindTo(Model.Types)) 我要更改颜色的

浏览 31提问于2021-05-28得票数 0

2回答

用于下拉菜单的Animate.css

jquery、twitter-bootstrap、animation、twitter-bootstrap-3、animate.css

我试着用animate.css和js动画下拉菜单实现它的工作，但不是我真正想要的:)它可以使动画-悬停在菜单上，而不是打开下拉。？code: $('.dropdown-toggle').hover(function() { $(this).next('.

浏览 1提问于2013-09-27得票数 1

回答已采纳

1回答

引导程序下拉单击的颜色

html、css、twitter-bootstrap

我已经做了大部分事情，但不知道如何在这里改变这个颜色(白色的)： Is this :active state？

浏览 12提问于2017-02-07得票数 0

回答已采纳

1回答

使三行文字同时在悬停时改变颜色-请帮忙

css、dreamweaver

嗨，我试图添加一个颜色变化在悬停到3行文本与三个不同的css样式在同一个div内。我已经添加到开头和结尾，但效果只适用于第一行文本。有人能帮忙吗？CSS color: #666; <div class="box1text" id=specialeffects"> what<br /> <span clas

浏览 2提问于2014-01-26得票数 1

回答已采纳

2回答

未应用下拉式文本颜色的悬停

html、css、drop-down-menu

我做了一个固定的导航栏，但似乎不能确定为什么当你在“主菜单”上悬停，然后悬停在子菜单上时，“主菜单”的文本不会改变颜色？#nav-top > ul > li > a:hover, .nav-top-menu-button:hover { color: #000

浏览 1提问于2017-01-30得票数 0

回答已采纳

1回答

如何在materialize css中更改<li>上悬停颜色

html、dropdown、materialize

当您单击它时，它会显示属于它的元素，它们具有正确的背景颜色，但当您悬停时，它的行为就像它是白色的，并对白色进行着色。我希望有帮助，使它正确地着色我的黑色背景。

浏览 8提问于2019-09-21得票数 0

回答已采纳

1回答

facebook点赞按钮文本对齐iframe javascript

facebook、button、facebook-like、text-alignment、text-align

href=http%3A%2F%2Fwww.google.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" sty

浏览 1提问于2011-03-10得票数 1

点击加载更多