如何解决使用跨度内的跨度突出显示文本
我正在尝试使用CSS和关键帧在网站上开发字幕“代码”,并通过php脚本填充文本。我所拥有的如下:
<style>
.marquee {
width: 1000px;
height: 25px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
border: 1px solid #FF0000;
background: GhostWhite;
color: black;
font-size: 20px;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
.marquee span:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* Make it move */
@keyframes marquee {
0% { transform: translate(0,0); }
100% { transform: translate(-100%,0); }
}
</style>
<center>
<p class="marquee"><span><?php echo outputstring; ?></span></p>
</center>
目前仅使用简单的php脚本填充字符串:
<?php
$outputstring = '';
$outputstring.= 'some text';
$outputstring.= ' some more text ';
$outputstring.= ' yet more text ';
?>
目前,它可以正常工作,但是我想做的是在输出字符串中放置彩色文本标记-在红色背景上以白色书写以告知用户新内容:
$outputstring = '';
$outputstring.='<span class="internalmarquee"> NEW </span>';
$outputstring.= 'some text';
$outputstring.='<span class="internalmarquee"> NEW </span>';
$outputstring.= ' some more text ';
$outputstring.= ' yet more text ';
具有以下定义
.internalmarquee
{
color:white;
font-weight:bold;
background-color: red;
}
但是,现在,当我运行代码时,整个选框最初是空白的,但是就像文本应该出现一样,向左滚动会变成红色,使所有文本模糊。有人可以建议修复吗?非常感谢!
解决方法
您需要在CSS中使用.marquee > span
而不是.marquee span
,并且在:hover
状态下也只能使用 direct span
孩子们。否则CSS会影响.marquee
容器内的所有跨度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。