小编Cth*_*lhu的帖子

有没有办法:hover 只使用 CSS？如:如果:hover是on Mouse Enter,是否有CSS相当于一个on Mouse Leave？

例:

我有一个使用列表项的HTML菜单.当我将鼠标悬停的项目之一,有来自CSS彩色动画#999来black.当鼠标离开项目区域时,如何创建相反的效果,动画从？black到#999？

的jsfiddle

(请记住,我不想只回答这个例子,而是整个"相反的:hover"问题.)

我目前正在开发一个看起来像这样的滚动条.如果这篇文章很长,你只需跳到示例!

左侧和右侧将有箭头向左或向右滚动.滚动条的颜色看起来不是灰色的,而是rgba(0,0,0,0.6).因此它是一个透明的黑色,将用于图像前面.

现在我希望该行中的最后几个字母在此示例中淡出.为了实现这一点,我使用div叠加:

background-image: linear-gradient(to right, rgba(255,255,255,0), black)

但是如果我用透明的滚动菜单来做,那就会搞乱滚动菜单的背景颜色(如果你不知道我的意思,请看这里).

所以我找到了一个解决方案,它将两个div与最右边的线性渐变相结合,如果你将它们叠放在一起,就可以精确地创建滚动菜单的背景颜色.其中一个位于字体后面,其中一个覆盖了字体.这样我就可以在字体上实现一些透明度.这是你们的一个例子:

#rightPart, #leftPart{
    width:200px; height:50px;
    position:absolute; top:0;left:0;
    color: white;
}
#rightPart{
    z-index:-1;
    background:linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));    
    
}
#leftPart{
     background:linear-gradient( to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));    
}

<div id="rightPart"> Slight Transparency effect on this </div>
<div id="leftPart"></div>

问题是透明效果仅限于0.5的背景透明度.因此,透明效果不能像我希望的那样强烈.

现在我要求一个解决方案,我可以用它来实现更强的透明效果.我很感激你的建议.

请记住,我不能只在最后透明地创建一个特定的单词,因为在滚动条的末尾总会有一个不同的单词!因此,我需要使字体本身在特定区域透明.我个人不知道该怎么做(特别是如果它应该适用于所有最新的浏览器版本 - 包括IE9 +).

Microsoft Edge不支持filter: blur();它应该支持.如果我有一个绝对定位元素filter: blur();,顶部显示的输入将变得坚固,与模糊融合(有趣的观察).

这是一个小提琴来展示会发生什么.在Chrome和Firefox中完美运行,但Edge变成了临界癫痫症.只需点击输入并享受:https: //jsfiddle.net/Cthulhu/3uz0Lpfz/2/

这是一个代码示例:

<style>
  article {
    background: url(http://uzebox.org/wiki/images/1/19/Arkanoid.gif) no-repeat;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    height: 448px;
    position: absolute;
    width: 720px;
  }

  input {
    margin: 100px 0 0 20px;
    position: relative;
  }
</style>

<article></article>
<input />

您甚至可以尝试在小提琴上放置一个Windows资源管理器窗口,它将与图像模糊"交互",这很有趣.我尝试截取屏幕截图,但最终结果显示了它们应该是的东西,并忽略了错误(没有乐趣:-().

有没有想过只使用 CSS 解决这个bug的想法？

我将开始开发一个新网站,我正准备处理浏览器用于计算元素宽度和高度的不同方法(盒子模型的东西).不知怎的,我想到了:如果我只是申请box-sizing网站上的所有元素怎么办？

我是其中一个认为这box-sizing: border-box;是CSS中最好的命令之一,但有其局限性.然而,同样的限制让我想知道我是否应该适用box-sizing于所有元素:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

当然,我的网站应该与尽可能多的浏览器兼容,并box-sizing在我们考虑IE7时产生一些问题.但是,有时候时间表太紧,以至于不用担心这个具体问题就可以获得额外的几分钟.

无论如何,你认为适用box-sizing:border-box;于所有元素是一个好的政策还是我应该只对实际需要它的元素这样做？

在jQuery中,可以选择以"something"开头/结尾的所有元素.

 = is exactly equal
!= is not equal
^= starts with
$= ends with

是否可以选择所有不以"某事"开头/结尾的元素？

我正在开发一个带有自定义帖子的wordpress网站,这些帖子按循环中的字母顺序排序.

<!-- THE ARGS -->
<?php global $query_string;
$args = wp_parse_args($query_string);
$args = array(
    'post_type' => 'custom_post',
    'orderby' => 'title',
    'order' => 'ASC',
    'posts_per_page' => -1,
    ); ?>

<!--  THE LOOP -->
<?php $wp_query = new WP_Query( $args ); ?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

那里没什么好看的,只是一个正常的循环.

当我打开帖子时,在其页面中我有通常的previous_post_link和next_post_link,所以我可以浏览帖子.但是,这是通过帖子的时间顺序来完成的,我希望按照我在循环中使用的字母顺序进行操作.对此事的任何帮助将非常感激.提前致谢!

我需要显示视频的持续时间.我应该使用<time>还是应该仅用于显示时钟？

例

这是正确的HTML5吗？

<p>Duration: <time>3:30 min</time>.</p>

或者<time>只应该在这种情况下使用？

<p>Good morning. The actual time is: <time>9:45</time></p>.

文件

MDN提供以下定义:

HTML元素表示24小时制的时间或公历中的精确日期(带有可选的时间和时区信息).该元素旨在用于以机器可读格式显示日期和时间.这有助于用户代理为用户的日历提供任何事件安排.

但是,W3C中的定义有些不同,它指的是持续时间:

指定元素表示的日期或时间.

值:以下任何一项:

• (......)

• [HTML5]规范中定义的有效持续时间字符串

例子:

PT4H18M3S

4h 18m 3s

Run Code Online (Sandbox Code Playgroud)

所以,我不确定我是否应该<time>在这种情况下使用.有什么想法吗？

我有一个以页面为中心的标题(h1).我想在标题的左侧和右侧添加线条,以便它们填充页面宽度的其余部分.但是,我希望线条适应标题的宽度,这是动态的.所以,我希望动态计算线的宽度.

这是我想要完成的一个例子:http://jsfiddle.net/cAEqE/1/

在示例中,我将线条的宽度设置为35%,以便它们可以获得我想要的效果.但是,如果标题更长,它将分为2行,我不希望这种情况发生.

我的老板告诉我要避免使用javascript,所以只使用CSS会很棒.但是,如果事实证明这是不可能的,我将转向优秀的旧jQuery.干杯!

编辑:网站有背景图片,所以我不能在h1上使用背景.谢谢!

我正在开发一个网站(Wordpress,HTML,CSS,jQuery),内容用葡萄牙语写成.连字符有很多单词,如果它们出现在行尾,则会被分成两半.这是一个例子:

Batata frita pála-
pála, é uma tara de
sabor.

有没有办法可以检测一个单词是否连字符,如果它在行尾,则不会将其分成两半？理想的是整个单词只能进入下一行,但如果不可能,我愿意接受建议.像这样的东西:

Batata frita
pála-pála, é uma
uma tara de sabor.

对我来说比了解解决方案更重要的是理解它.提前致谢.

编辑

该网站是在CMS平台上开发的,内容由客户端插入并且是动态的.我不能指望客户端自己使用非断开连字符(HTML ‑).

嗨Stack Overflow社区.

我正在为撒旦开发一个wordpress网站.首先,我是一个初级的web开发人员,所以让我说我还有很多需要学习的东西...... :-)这是我第一次使用Ajax,而且我对PHP没有多少经验或word外的SQL.

该网站具有基于复选框的搜索功能.我有2组3个复选框(所以,总共6个).所以,我有2个分类法,每个复选框代表一个不同的术语.我想根据Satan使用这些复选框选择的类别,使用ajax更改页面内容.我能够做到这一点,但一次只能复制一个复选框.因为有几十种不同的组合,我不认为编写几十种不同的查询/参数(每种组合一种)是一个很好的策略.那么,我该怎么做呢？

让我们看一个例子,让你理解我的意思:

想象一下,撒旦想通过一种形式来检查地狱中的灵魂数量.有两组复选框,一组用于人,一组用于惩罚,如下所示:

人

• 男人
• 妇女
• 孩子

惩罚

• 在火焰中
• 刺穿
• 被恶魔吃掉

现在,我有这个jQuery Ajax代码:

$('#searchsouls').click(function(){
    $.ajax({
        url:"<?php echo get_bloginfo('template_url'); ?>/evil-laugh.php",
        type:"POST",
        async:"false",
        data:$("#de-form").serialize(),
        success:function(data) {
            $('#666').empty().html(data);
        },
        error:function(e){
            console.log('Error: ' + e);
        }
  });
  return false;
})

这工作得很好.然后,我在evil-laugh.php里面有这个代码:

<?php global $query_string;
$args = wp_parse_args($query_string);
$args = array(
'post_type' => 'souls',
'paged' => $paged, 
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page' => -1,
'post_status' => 'publish',
);

?>

<!--  THE LOOP -->
<?php $wp_query = new WP_Query( $args …

我想在 2000 毫秒后自动更改图像。图像应该淡入。

我的 HTML：

<div class="nile-slider large-12 column">
  <img alt="landing page 3" src="assets/Startseite/Slider/Slider_2.jpg">
</div>

我的JS：

// change header image after 2 seconds
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'],
    index = 0, // starting index
    maxImages = images.length - 1;
var timer = setInterval(function() {
    var currentImage = images[index];
    index = (index == maxImages) ? 0 : ++index;
    $('.nile-slider img').attr('src','assets/Startseite/Slider/'+currentImage).fadeIn('slow');
 }, 2000);

使用此代码，图像会发生变化，但不会淡入。如何强制图像淡入（甚至淡出）？

我在这里有一个非常简单的菜单示例:

<ul id="1">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a>
    <ul id="2">
        <li><a href="#">Second - 1</a></li>
        <li><a href="#">Second - 2</a></li>
        <li><a href="#">Second - 3</a>
        <ul id="3">
            <li><a href="#">Aaa</a></li>
            <li><a href="#">Bbb</a></li>
            <li><a href="#">Ccc</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Third</a></li>
</ul>

我需要得到<li>一个孩子<ul>,这是一个孩子,<ul>谁是孩子<li>,并应用它的风格.

我知道这听起来很复杂,但在上面的例子中,我想只得到<li>一个说"二 - 3",这是一个ul里面的孩子,有一个孩子的ul.我不想得到任何其他<li>的.

如果没有得到"第二"的李,我就不能这样做,我不希望这样.

$("li > ul").addClass('whatever');

我创建了一个自定义字段的无序列表,如果它们是空的,我希望隐藏它们.对于文本自定义字段,我使用了代码:

<?php if (get_field('phone') != '') { ?>
  <li><strong>Phone: </strong><?php the_field('phone'); ?></li>
<?php } ?>

但是,我有一个自定义字段用于图像,如下所示:

<li><strong>Logo: </strong><img src="<?php the_field('logo'); ?>"></img></li>

如果没有上传图像,我怎么能隐藏字段(显然,上面的代码不起作用)？提前致谢.