Danila提出的问题

Danila

Asked: 2024-07-25 20:46:09 +0000 UTC

如何设置滑块中中间幻灯片之前的幻灯片的样式？

5

有一项任务是制作一个由五个活动幻灯片组成的滑块：中央的幻灯片较大，两侧的幻灯片稍小，外部的幻灯片是标准的。使用纯 CSS，可以只设置中央的样式和后面的样式：

let owl = $('.owl-carousel');

owl.owlCarousel({
  center: true,
  items: 5,
  loop: true,
  nav: true
});

.container {
  max-width: 1400px;
  margin: 50px auto;
}
.slider {
  border: 1px solid red;
}
.slide {
  padding: 50px 0;
  transition: .5s;
}
.slide img {
  display: block;
  max-width: 100%;
}
.owl-item.center {
  transform: scale(1.5) !important;
  transition: .3s;
  position: relative;
  z-index: 2;
}
.owl-item.center + .owl-item {
  transform: scale(1.25);
  transition: .3s;
  position: relative;
  z-index: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="container">
  <div class="slider owl-carousel">
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
  </div>
</div>

我尝试使用 js 在上一张幻灯片中添加一个类并以这种方式设置其样式，但效果不佳 - 当翻转滑块时，该类被添加到另一个元素中：

/出于某种原因，在片段中根本没有添加任何内容/

let owl = $('.owl-carousel');

owl.owlCarousel({
  center: true,
  items: 5,
  loop: true,
  nav: true
});

$('.owl-item.active.center').prev().addClass('prev');

owl.on('changed.owl.carousel', function(event) {
  $('.owl-item').removeClass('prev');
  $('.owl-item.active.center').prev().addClass('prev');
});

.container {
  max-width: 1400px;
  margin: 50px auto;
}
.slider {
  border: 1px solid red;
}
.slide {
  padding: 50px 0;
  transition: .5s;
}
.slide img {
  display: block;
  max-width: 100%;
}
.owl-item.center {
  transform: scale(1.5) !important;
  transition: .3s;
  position: relative !important;
  z-index: 2;
}
.owl-item.center + .owl-item,
.owl-item.prev {
  transform: scale(1.25);
  transition: .3s;
  position: relative;
  z-index: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="container">
  <div class="slider owl-carousel">
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
  </div>
</div>

告诉我，如何设置中间幻灯片中上一张幻灯片的样式？

Danila

Asked: 2024-06-28 22:22:03 +0000 UTC

CSS：将文本叠加在深色背景块上时如何动态反转文本颜色？

11

当您将鼠标悬停在彩色块上时，它会平滑地爬到文本下方。此时块背景上的部分文本有必要将其颜色更改为白色。我尝试了所有选项mix-blend-mode- 它们至少稍微改变了文本颜色hue，saturation但color它远非白色。其余的要么没有效果，要么将文本隐藏在背景下。

如何解决这个问题呢？这有可能吗？无需任何拐杖进行文本复制、打开/隐藏等。

main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}
.main-text {
  position: relative;
  max-width: 70%;
  /*mix-blend-mode: ;*/
}
.color-block {
    height: 100%;
    width: 100%;
    background-color: #2845AA;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -90%;
    transition: .5s;
}
.color-block:hover {
    right: -40%;
}

<main>
  <div class="color-block"></div>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

Danila

Asked: 2024-03-18 15:49:06 +0000 UTC

滚动块内的锚点菜单无法正常工作

5

UPD代码示例应该以较小的尺寸运行，而不是扩展到整个页面。当并非所有菜单项最初都可见并且您需要用鼠标滚动到它们时，问题就会出现。

有一段 jQuery 代码可以实现到锚点的平滑过渡。当整个页面滚动时，它可以正常工作，但在滚动的块内，所有内容都无法正常工作：

$('.main-nav a').on('click',function(e){
  e.preventDefault();
  let elementClick = $(this).attr('href');
  let destination = $(elementClick).offset().top;
  $('main').animate({ scrollTop: destination }, 1000);
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  font-size: 16px;
}
header, footer {
  height: 20vh;
  border: 1px solid maroon;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  height: 60vh;
  overflow: auto;
  padding: 20px;
}
.main-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.main-nav a {
  padding: 5px 0;
}
.content {
  padding: 20px;
  color: white;
  height: 100vh;
}
#one, #four, #seven {
  background-color: red;
}
#two, #five, #eight {
  background-color: green;
}
#three, #six, #nine {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
  <div class="main-nav">
    <a href="#one">1. One</a>
    <a href="#two">2. Two</a>
    <a href="#three">3. Three</a>
    <a href="#four">4. Four</a>
    <a href="#five">5. Five</a>
    <a href="#six">6. Six</a>
    <a href="#seven">7. Seven</a>
    <a href="#eight">8. Eight</a>
    <a href="#nine">9. Nine</a>
  </div>
  <div class="content" id="one">One</div>
  <div class="content" id="two">Two</div>
  <div class="content" id="three">Three</div>
  <div class="content" id="four">Four</div>
  <div class="content" id="five">Five</div>
  <div class="content" id="six">Six</div>
  <div class="content" id="seven">Seven</div>
  <div class="content" id="eight">Eight</div>
  <div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>

很明显，问题出在变量上destination。我尝试将其计算为从父级顶部到所需块的距离。对于第一个菜单项，它可以正常工作。但如果你滚动到较低的点，一切都会再次崩溃：

$('.main-nav a').on('click',function(e){
  e.preventDefault();
  let elementClick = $(this).attr('href');
  //let destination = $(elementClick).offset().top;
  let destination = $(elementClick).offset().top - $(elementClick).parent().offset().top - $(elementClick).parent().scrollTop();
  $('main').animate({ scrollTop: destination }, 1000);
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  font-size: 16px;
}
header, footer {
  height: 20vh;
  border: 1px solid maroon;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  height: 60vh;
  overflow: auto;
  padding: 20px;
}
.main-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.main-nav a {
  padding: 5px 0;
}
.content {
  padding: 20px;
  color: white;
  height: 100vh;
}
#one, #four, #seven {
  background-color: red;
}
#two, #five, #eight {
  background-color: green;
}
#three, #six, #nine {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
  <div class="main-nav">
    <a href="#one">1. One</a>
    <a href="#two">2. Two</a>
    <a href="#three">3. Three</a>
    <a href="#four">4. Four</a>
    <a href="#five">5. Five</a>
    <a href="#six">6. Six</a>
    <a href="#seven">7. Seven</a>
    <a href="#eight">8. Eight</a>
    <a href="#nine">9. Nine</a>
  </div>
  <div class="content" id="one">One</div>
  <div class="content" id="two">Two</div>
  <div class="content" id="three">Three</div>
  <div class="content" id="four">Four</div>
  <div class="content" id="five">Five</div>
  <div class="content" id="six">Six</div>
  <div class="content" id="seven">Seven</div>
  <div class="content" id="eight">Eight</div>
  <div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>

显然，destination这种滚动到较低点的情况仍然需要以某种方式考虑在内。但我不知道该怎么做。我将非常感谢你的帮助。

Danila

Asked: 2022-07-18 20:47:31 +0000 UTC

Jquery：手动切换后 Opera 和 Chrome 中的自动选项卡切换中断

3

单选按钮上的选项卡中有新闻组，它们会自动切换到setInterval. 当您将鼠标悬停在标签或新闻本身上时，切换停止。当光标离开新闻块时，切换继续。但是在 Chrome 和 Opera 中，如果您开始手动切换标签，一切都会中断：光标离开后，某种水上迪斯科开始了。

在调试器中，我注意到手动切换选项卡时，属性 . 没有添加到单选按钮checked中。好的，我添加了一个强制添加 this 的脚本checked。但问题并没有解决。同时在 Mozilla 中一切正常。

告诉我，标签出现这种行为的原因是什么以及如何解决？（最好全屏播放示例代码。）在不同浏览器中测试的沙盒链接：https ://jsfiddle.net/dh29rubf/1/

function changeCountry() {
  $('[name="news-radio"]').each(function(){
    if($(this).next('[name="news-radio"]').length == 0) {
      $(this).removeAttr('checked');
      $('[name="news-radio"]:first-child').attr('checked','checked');
    }
    if($(this).attr('checked')) {
      $(this).removeAttr('checked');
      $(this).next().attr('checked','checked');
      return false;
    }
  });
}

let timer = setInterval(changeCountry, 2000);

$('.news-label-wrap, .big-news, .small-news').on('mouseover', function(){
  clearInterval(timer);
});

$('#main-news').on('mouseleave', function(){
  timer = setInterval(changeCountry, 2000);
});

//скрипт, который принудительно добавляет checked при ручном переключении
$('.news-label-wrap label').on('click',function(){
  let check = $(this).attr('for');
  $('[name="news-radio"]').each(function(){
    if($(this).attr('id') == check) {
      $(this).attr('checked','checked');
      $('[name="news-radio"]').not($(this)).removeAttr('checked');
    }
  });
});

* {
  box-sizing: border-box;
}
#main-news {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
#main-news [type="radio"] {
    display: none;
}
.news-label-wrap {
    display: flex;
    gap: 60px;
}
.news-label-wrap label {
    display: block;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
    cursor: pointer;
}
#news-actual:checked ~ .news-label-wrap label[for="news-actual"],
#news-tunis:checked ~ .news-label-wrap label[for="news-tunis"],
#news-tanzania:checked ~ .news-label-wrap label[for="news-tanzania"],
#news-oae:checked ~ .news-label-wrap label[for="news-oae"],
#news-egipet:checked ~ .news-label-wrap label[for="news-egipet"] {
    font-weight: 700;
    color: #06C4E5;
}
#main-news h2 {
    color: #1D2D3A;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 20px;
}
.news-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 60px;
    opacity: 0;
    z-index: -1;
    transition: .5s;
}
#news-actual:checked ~ .news-wrap.news-actual,
#news-tunis:checked ~ .news-wrap.news-tunis,
#news-tanzania:checked ~ .news-wrap.news-tanzania,
#news-oae:checked ~ .news-wrap.news-oae,
#news-egipet:checked ~ .news-wrap.news-egipet {
    z-index: 1;
    opacity: 1;
    position: static;
}
.big-news {
    width: 49%;
    padding: 15px;
    border: 1px solid #06C4E5;
}
.big-news-pic {
    display: block;
    text-decoration: none;
    width: 100%;
    padding-top: 58.5%;
    background-size: cover;
}
.big-news-title {
    margin: 10px 0;
}
.big-news-title a {
    text-decoration: none;
    color: #1D2D3A;
    font-weight: 700;
    font-size: 24;
    line-height: 32px;
}
.big-news-date {
    color: #1D2D3A;
    font-weight: 700;
    font-size: 18;
    line-height: 27px;
}
.small-news-wrap {
    width: 49%;
    padding: 10px;
    border: 1px solid #06C4E5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.small-news {
    width: 49%;
}
.small-news-pic {
    display: block;
    text-decoration: none;
    width: 100%;
    padding-top: 60%;
    background-size: cover;
}
.small-news-title {
    margin: 5px 0 15px;
}
.small-news-title a {
    text-decoration: none;
    color: #1D2D3A;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
}
@media (max-width: 1199px) {
    #main-news h2 {
        padding: 0 15px;
    }
    .news-label-wrap {
        padding: 0 15px;
        gap: 40px;
    }
}
@media (max-width: 900px) {
    #main-news h2 {
        width: 100%;
        text-align: center;
    }
    .news-label-wrap {
        width: 100%;
        padding: 10px 15px 20px;
    }
    .news-wrap {
        top: 110px;
    }
}
@media (max-width: 800px) {
    .news-wrap {
        flex-wrap: wrap;
    }
    .big-news,
    .small-news-wrap {
        width: 100%;
    }
    .big-news {
        margin-bottom: 20px;
    }
    .news-label-wrap {
        overflow: auto;
        gap: 25px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main-news">

    <input type="radio" name="news-radio" id="news-actual" checked>
    <input type="radio" name="news-radio" id="news-tunis">
    <input type="radio" name="news-radio" id="news-tanzania">
    <input type="radio" name="news-radio" id="news-oae">
    <input type="radio" name="news-radio" id="news-egipet">

    <h2>Новости туризма</h2>

    <div class="news-label-wrap">
        <label for="news-actual">Актуальное</label>
        <label for="news-tunis">Тунис</label>
        <label for="news-tanzania">Танзания</label>
        <label for="news-oae">Оаэ</label>
        <label for="news-egipet">Египет</label>
    </div>

    <div class="news-actual news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 1</a></h3>
            <span class="big-news-date">11.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
        </div>
    </div>

    <div class="news-tunis news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 2</a></h3>
            <span class="big-news-date">12.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
        </div>
    </div>

    <div class="news-tanzania news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 3</a></h3>
            <span class="big-news-date">13.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
        </div>
    </div>

    <div class="news-oae news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 4</a></h3>
            <span class="big-news-date">14.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
        </div>
    </div>

    <div class="news-egipet news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 5</a></h3>
            <span class="big-news-date">15.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5!</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5</a></h3>
            </div>
        </div>
    </div>

</section>

Danila

Asked: 2022-03-22 15:37:39 +0000 UTC

Wordpress：strtotime() 昨天返回

1

有一项任务是从 Yandex 向站点提取天气预报。日期以格式显示<time class="time forecast-briefly__date" datetime="2021-10-22 00:00+0300">22 окт</time>。

我在 $date 中输入了 datetime 属性“2021-10-22 00:00+0300”的值
我使用“day.month”形式获取日期date('d.m', strtotime($date))
一周中的某一天，分别通过strftime('%a', strtotime($date))

在测试常规 php 页面（没有引擎）上，所有内容都输出并正确显示：22.10, Fri. 但是，当我将此代码传输到 Wordpress 下的网站主页时，我得到了昨天：（21.10, Thu所有其他数据都正确提取，适用于今天的日期）。

当然，这个问题是通过在 date 上加一天来解决的strtotime($date)+86400，但这显然是一个“拐杖”。

你能告诉我为什么它在 Wordpress 中不能正常工作strtotime($date)吗？也许还有其他方法可以从 datetime="2021-10-22 00:00+0300" 获取我需要的数据？

Danila

Asked: 2022-09-22 20:14:44 +0000 UTC

如果知道现有颜色的透明度，是否可以知道原始颜色？

1

有一块蓝色的阴影：

ColorPic 将其代码定义为#4493b1或rgba(68, 147, 177, 1)。但可以肯定的是，这种颜色是由于赋予透明度（opacity: 0.7）而获得的。同时，这个方块位于body的背景之上#dfe2d9。

有没有办法找出原始颜色代码？有公式吗？或者一些允许你这样做的服务？

Danila

Asked: 2022-07-07 21:35:46 +0000 UTC

CSS：应该给子元素什么左值，以便它完全超出父元素的宽度？

2

有一个父块position: relative和一个子块position: absolute（最初它是隐藏的，当悬停在父块上时会出现）。它必须完全超出父级的边缘到其宽度。但问题是它里面的内容是动态形成的，不可能以像素为单位设置具体的宽度。

有没有可能用纯css解决问题？还是我需要使用js来计算宽度并将这个值添加到left？

.wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}
.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  left: -94px;
  transition: .2s;
}
.wrap:hover .inner {
  opacity: 1;
}

<div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

如何设置滑块中中间幻灯片之前的幻灯片的样式？

CSS：将文本叠加在深色背景块上时如何动态反转文本颜色？

滚动块内的锚点菜单无法正常工作

Jquery：手动切换后 Opera 和 Chrome 中的自动选项卡切换中断

Wordpress：strtotime() 昨天返回

如果知道现有颜色的透明度，是否可以知道原始颜色？

CSS：应该给子元素什么左值，以便它完全超出父元素的宽度？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

Danila's questions