小编rob*_*t-s的帖子

我正在尝试用文本加载动画CSS.我所拥有的是一个黑色的文本,然后当页面加载文本将填充开始填充红色几秒钟.

我面临的问题是文本加载动画工作正常,但是当文本结束并以新行开头时,动画文本仍然在同一行上继续.

我怎样才能解决这个问题？

码:

    body {
    background: #3498db;
    font-family: sans-serif;
    }
    h1 {
        position: relative;
        color: rgba(0, 0, 0, .3);
        font-size: 5em;
        white-space: wrap;
    }
    h1:before {
        content: attr(data-text);
        position: absolute;
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
        word-break: break-all;
        color: #fff;
        animation: loading 8s linear;
    }
    @keyframes loading {
        0% {
            max-width: 0;
        }
    }

<h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>

目前,render方法只能返回单个元素/组件.见:这里

在该票据的讨论中,一些人建议将从React组件返回的多个元素包装在HTML注释中,以便浏览器忽略包装组件,例如:

<A>
    <B></B>
    <Fragment>
        <C></C>
        <D></D>
    </Fragment>
    <E></E>
</A>

会呈现给:

<a>
    <b></b>
    <!--<fragment data-reactid="">-->
        <c></c>
        <d></d>
    <!--</fragment>-->
    <e></e>
</a>

但是如何实际创建一个只呈现HTML注释的组件？换句话说,上面例子中'fragment'组件的render函数如何看起来像？

我在这里有一个令人费解的事业.

我正在构建一个用作"火炬/探照灯"的鼠标.如果发生悬停,所有文本(内联元素,按钮,你得到的点)都会从通常的白色反转为黑色,正常的背景是黄色的氛围.

我目前有以下设置:

const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');

$(document).on('mousemove', (e) => {
  _$back.css({
    left: e.pageX,
    top: e.pageY
  });
  _$front.css({
    left: e.pageX,
    top: e.pageY
  });
  _$shadow.css({
    left: e.pageX,
    top: e.pageY
  });
});

html,
body {
  padding: 0;
  margin: 0;
  cursor: none;
  background: red;
}

.test {
  background: darkblue;
}

p {
  color: white;
  font-family: sans-serif;
  font-size: 20px;
  max-width: 30rem;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid white;
}

p,
span,
a {
  position: relative; …

当我选择文本时,背景颜色变为黄色.

body p::selection {
  background: #fcf113;
  color: #000;
  display: none;
}
body p::-moz-selection {
  background: #fcf113;
}

但是,我希望它看起来像这样.

有可能吗？

我有以下代码:

<?php $the_query = new WP_Query( 'posts_per_page=30&post_type=phcl' ); ?>

<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

<div class="col-xs-12 file">
    <a href="<?php echo $file; ?>" class="file-title" target="_blank">
        <i class="fa fa-angle-right" aria-hidden="true"></i> 
        <?php echo get_the_title(); ?>
    </a>
    <div class="file-description">
        <?php the_content(); ?>
    </div>
</div>
<?php endwhile; wp_reset_postdata(); ?>

我正在尝试使用paginate_linksWordpress功能但无论我把它放在哪里,我都无法使其工作.有人可以帮我弄这个吗？

首先,这是我正在尝试使用CSS重现的内容:

我想知道,我怎么能重现这个圆圈周围从紫色到粉红色的渐变？

任何帮助真的很感激!我尝试了不同的东西,似乎没有任何工作按预期,渐变背景搞砸了,边框相关的时尚也没有很好地工作,我真的不知道该怎么办了.有任何想法吗？

到目前为止这是我的代码:

HTML和CSS:

#DIV_1,
#DIV_2 {
  bottom: 0px;
  float: left;
  height: 120px;
  left: 0px;
  position: relative;
  right: 0px;
  top: 0px;
  width: 120px;
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  background: rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
  margin: 0px 12px 12px 0px;
}

#DIV_1:after,
#DIV_2:after {
  bottom: 9.60938px;
  content: ' ';
  display: block;
  height: 100.797px;
  left: 9.6px;
  position: …

语境:

我制作了一张地图,并用大约300个随机标记填充它.我可以通过单击弹出窗口中的链接"选择"标记,然后激活选择以显示数据.我还有Leaflet.draw插件来绘制圆形,矩形和自定义形状等形状,我想用它来"选择"几个标记.

问题

如何抓取落在绘制的leaflet.draw形状内的标记的传单标记对象,以便我可以编辑它们？我似乎无法做出选择,它既不选择任何标记,也不选择所有标记.

代码片段,从不必要的代码中删除:

const drawControl = new L.Control.Draw({
    draw: {
        marker   : false,
        polygon  : true,
        polyline : false,
        rectangle: true,
        circle   : {
            metric: 'metric'
        }
    },
    edit: false
});

const map = L.map('map', {
    layers: [streets, light]
}).setView([CONFIG.MAP.LATITUDE, CONFIG.MAP.LONGITUDE], CONFIG.MAP.ZOOMLEVEL)

map.addControl(drawControl);

map.on(L.Draw.Event.DRAWSTOP, e => {

    const hello = e.target;

    console.log(hello);
    e.target.eachLayer(layer => {
        if (layer.options.icon) {
            console.log(layer);
        }
    });

});

使用Bootstrap 4.

我有四个文本输入,如果任何文本输入包含任何值,我想在按钮中添加一个类.

单击按钮时,我想清除输入值,并从按钮中删除该类.

我有一半工作(点击按钮成功清除所有输入).

我的代码如下;

 $(document).ready(function() {
      $("#filterRecords input").on("keyup change", function() {
        $("#filterRecords input").each(function() {
          var element = $(this);
          if (element.val().length > 0) {
            $('#resetFilter').addClass('btn-outline-primary');
          }
        });
      });
      $('#resetFilter').click(function() {
        $('input[type=text]').val('').change();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
      <div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
        <input type="text" id="searchName" class="form-control" placeholder="Search Name">
      </div>
      <div class="input-group col-sm-6 col-md-3 mb-3">
        <input type="text" id="searchLang" class="form-control" placeholder="Search Language">
      </div>
      <div class="input-group col-sm-6 col-md-3 mb-3">
        <input type="text" id="yearMin" class="form-control start" placeholder="Search Start …

在这种情况下建议替换什么sometag：

<p>Please find the configuration in <sometag>/etc/important.conf</sometag>.</p>

对于这种情况有一个既定的标准吗？

我经常在需要在悬停时显示菜单的情况下,对于移动设备,菜单应该在点击时打开.现在考虑以下示例:

.btn {
  width: 200px;
  background-color: #333;
  color: white;
  padding: 10px;
}
.menu {
  display: none;
  padding: 15px;
}
.btn:hover .menu {
  display: block;
}
.btn:focus .menu {
  display: block;
}

<div class="btn">
  Button
  <div class="menu">I am menu</div>
</div>

现在,这会自动在移动设备上运行,因为悬停状态在触摸设备上是粘性的.但这种黑客攻击适用于所有触控设备吗？也就是说,风险值得吗？是否会有一些触摸设备没有悬停状态粘？显然,替代方案是在触摸设备上使用JavaScript分配触摸/点击事件,但这似乎是多余的,因为我没有看到任何没有粘滞状态的触摸设备？

所以我的问题是:

是否可以使用悬停状态hack或我应该使用JavaScript事件使其更具防弹性？