I am working in WordPress.I have fetched multiple data from the database and put them into an anchor tag. When I click on the link then its color doesn't change so I can not identify which link is active?
我在WordPress中工作。我从数据库中获取了多个数据并将它们放入锚标记中。当我点击链接然后它的颜色没有改变所以我无法识别哪个链接是活动的?
My CSS is:
我的CSS是:
.cd-popup-trigger:active {
color: #000;
}
And my code is like this:
我的代码是这样的:
<a href="0#" class="cd-popup-trigger" id="cd-popup-trigger_<?php echo $trow->ID; ?>">
<span class="tooltip-home-item" title="<?php echo get_post_meta( $trow->ID, 'wpcf-short-description', true );?>">
<img src="<?php echo $url; ?>" alt="<?php echo $trow->post_title; ?>" width="20px" height="20px" />
<label for="<?php echo $trow->post_name; ?>">
<?php echo $trow->post_title; ?>
</label>
</span>
</a>
Moreover, I have used jQuery to display a popup box while clicking on it. And I have used tooltips on mouse over. My website is here if you want to check it out. You can check it under food types on my site.
而且,我在点击它时使用了jQuery来显示一个弹出框。我在鼠标上使用了工具提示。如果你想看看我的网站在这里。您可以在我的网站上的食物类型下查看它。
3 个解决方案
#1
Well right now you are adding the css to your active state, and its working. But if you want to add styling so even after clicking it remains there, then you will have to add a class through jQuery.
那么现在你将css添加到你的活动状态,并且它正在工作。但是如果你想添加样式,那么即使点击它仍然存在,那么你将不得不通过jQuery添加一个类。
jQuery('.cd-popup-trigger').click(function(){
jQuery('.cd-popup-trigger').removeClass('active');
jQuery(this).addClass('active');
});
I haven't tested it, but what it should do is assign a class next to "cd-popup-trigger", and when you click on some other element, it will then remove the previous one and assign it to the new element.
我没有测试它,但它应该做的是在“cd-popup-trigger”旁边分配一个类,当你点击其他元素时,它将删除前一个元素并将其分配给新元素。
Now you just have to style this in your css
现在你只需要在你的CSS中设置这个样式
.cd-popup-trigger.active label {
color: red;
}
#2
wordpress always add a class to its current selected item.
wordpress总是在其当前所选项目中添加一个类。
current-menu-item
So you can use it like
所以你可以像使用它一样
.current-menu-item {
color: #000;
}
#3
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
CSS伪类是添加到选择器的关键字,用于指定要选择的元素的特殊状态。例如:当用户将鼠标悬停在选择器指定的元素上时,hover将应用样式。
Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).
伪类与伪元素一起,允许您将样式应用于元素,不仅与文档树的内容相关,还与外部因素(如导航器的历史记录)相关(例如,访问过) ,其内容的状态(如:检查某些表单元素),或鼠标的位置(如:鼠标悬停,让你知道鼠标是否在元素上)。
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.
:当用户激活元素时,活动CSS伪类匹配。它允许页面给出反馈,表明浏览器已检测到激活。与鼠标交互时,通常是用户按下鼠标按钮并释放它之间的时间。 :使用键盘选项卡键时,通常也会匹配:active伪类。它经常用于和
This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules.
任何其他与链接相关的伪类都可以覆盖此样式,即:link,:hover和:visited,出现在后续规则中。
In order to style the appropriate links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
为了设置相应链接的样式,您需要在所有其他与链接相关的规则之后放置:active规则,如LVHA-order所定义:: link - :visited - :hover - :active。
Note: On systems with multi-button mice, CSS 3 specifies that the
:activepseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.注意:在具有多按钮鼠标的系统上,CSS 3指定:active伪类只能应用于主按钮;在右手老鼠身上,这通常是最左边的按钮。
#1
Well right now you are adding the css to your active state, and its working. But if you want to add styling so even after clicking it remains there, then you will have to add a class through jQuery.
那么现在你将css添加到你的活动状态,并且它正在工作。但是如果你想添加样式,那么即使点击它仍然存在,那么你将不得不通过jQuery添加一个类。
jQuery('.cd-popup-trigger').click(function(){
jQuery('.cd-popup-trigger').removeClass('active');
jQuery(this).addClass('active');
});
I haven't tested it, but what it should do is assign a class next to "cd-popup-trigger", and when you click on some other element, it will then remove the previous one and assign it to the new element.
我没有测试它,但它应该做的是在“cd-popup-trigger”旁边分配一个类,当你点击其他元素时,它将删除前一个元素并将其分配给新元素。
Now you just have to style this in your css
现在你只需要在你的CSS中设置这个样式
.cd-popup-trigger.active label {
color: red;
}
#2
wordpress always add a class to its current selected item.
wordpress总是在其当前所选项目中添加一个类。
current-menu-item
So you can use it like
所以你可以像使用它一样
.current-menu-item {
color: #000;
}
#3
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
CSS伪类是添加到选择器的关键字,用于指定要选择的元素的特殊状态。例如:当用户将鼠标悬停在选择器指定的元素上时,hover将应用样式。
Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).
伪类与伪元素一起,允许您将样式应用于元素,不仅与文档树的内容相关,还与外部因素(如导航器的历史记录)相关(例如,访问过) ,其内容的状态(如:检查某些表单元素),或鼠标的位置(如:鼠标悬停,让你知道鼠标是否在元素上)。
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.
:当用户激活元素时,活动CSS伪类匹配。它允许页面给出反馈,表明浏览器已检测到激活。与鼠标交互时,通常是用户按下鼠标按钮并释放它之间的时间。 :使用键盘选项卡键时,通常也会匹配:active伪类。它经常用于和
This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules.
任何其他与链接相关的伪类都可以覆盖此样式,即:link,:hover和:visited,出现在后续规则中。
In order to style the appropriate links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
为了设置相应链接的样式,您需要在所有其他与链接相关的规则之后放置:active规则,如LVHA-order所定义:: link - :visited - :hover - :active。
Note: On systems with multi-button mice, CSS 3 specifies that the
:activepseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.注意:在具有多按钮鼠标的系统上,CSS 3指定:active伪类只能应用于主按钮;在右手老鼠身上,这通常是最左边的按钮。