主页 / coding / 问题

问题[css](coding)

Martin Hope
Small Duck
Asked: 2025-03-24 12:56:24 +0800 CST
  • 6

将我的标题从这个改为我们在图像 #2和#3上看到的标题真的很复杂吗？将鼠标悬停在 © 上时，标题就会出现。

我不太懂编码，但我很想学习。有什么技巧吗？我需要 JS 和 CSS 吗？

我虽然有点类似，但我不知道如何添加

figcaption {
  position: relative;
}

figcaption :hover:after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  z-index: 999;
  background: #ccc;
  color: white;
  padding: 5px;
}
css
Martin Hope
Small Duck
Asked: 2025-03-22 17:25:39 +0800 CST
  • 6

我在卡片组件中遇到了 mailto 链接问题。这是我的代码：

<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500">
    [email protected]
  </span>
</a>

问题是，正如您在附图中看到的，电子邮件周围的绿色背景左侧和右侧有多余的空间。

  • 当卡片很宽时，一切看起来都很好。

  • 当卡片变小时，文本会按预期换行，但绿色背景比文本大，从而产生不必要的填充。

我希望绿色背景在换行时能够精确缩小到文本宽度。

我尝试使用 whitespace-nowrap，但这会导致文本溢出其容器。这种方法暂时有效，但如果电子邮件太长，它最终也会溢出卡片。

有什么办法可以解决这个问题吗？提前致谢！

图片 1 图片 2

css
Martin Hope
michaelmcgurk
Asked: 2025-03-09 21:02:00 +0800 CST
  • 5

为什么我的第一个按钮从左到右动画，而“dark-btn”却没有？有什么原因吗？

这是我的 JSFiddle https://jsfiddle.net/Ld41puh7/并且我已经嵌入了代码。

* {
  margin:0;
  padding:0;
}

.elementor-button {
    position: relative;
    overflow: hidden;
    background-color: white !important;
    color: black;
    border: 2px solid #00E0FD;
    padding: 12px 24px;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Hover Effect */
.elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #00E0FD;
    transition: left 0.4s ease-in-out;
    mix-blend-mode: multiply; /* Keeps text visible */
}

.elementor-button:hover::before {
    left: 0;
}

.elementor-button:hover {
    color: black; /* Ensure text is readable */
}

/* Dark Button Variant */
.dark-btn .elementor-button {
    background-color: black !important;
    color: white;
    border: 2px solid #00E0FD;
}

/* Dark Button Hover Effect */
.dark-btn .elementor-button:hover {
    background-color: white !important;
    color: black;
}

.dark-btn .elementor-button::before {
    background-color: white;
}
<div style="background:white;height:100px;width:100%">

<div class="elementor-element elementor-element-02d035e elementor-align-center elementor-mobile-align-justify elementor-widget elementor-widget-button" data-element_type="widget" data-id="02d035e" data-widget_type="button.default">
        <div class="elementor-widget-container">
            <div class="elementor-button-wrapper">
                <a class="elementor-button elementor-button-link elementor-size-sm" href="#"><span class="elementor-button-content-wrapper"><span class="elementor-button-text">See our Case Studies</span></span></a>
            </div>
        </div>
    </div>
</div>

<div style="background:black;height:100px;width:100%">
<div class="elementor-element elementor-element-02d035e elementor-align-center elementor-mobile-align-justify dark-btn elementor-widget elementor-widget-button" data-element_type="widget" data-id="02d035e" data-widget_type="button.default">
        <div class="elementor-widget-container">
            <div class="elementor-button-wrapper">
                <a class="elementor-button elementor-button-link elementor-size-sm" href="#"><span class="elementor-button-content-wrapper"><span class="elementor-button-text">See our Case Studies</span></span></a>
            </div>
        </div>
    </div>
</div>

css
Martin Hope
marko kraljevic
Asked: 2025-03-09 17:20:32 +0800 CST
  • 6

文档说在 v4 中基础层和组件层仍然用 和 定义@layer base，@layer components同样在 v3 中这样定义的类也可以用@apply。问题是它们在 v4 中失败了。

https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

实际上，这意味着我必须定义所有基础、组件和实用程序层@utility才能使用这些类，而这@apply当然会造成很大的混乱。

我可以用定义所有层@utility，然后在@import语句中设置层，但这看起来也不太好。

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/base.css" layer(base);
@import "tailwindcss/components.css" layer(components);
@import "tailwindcss/utilities.css" layer(utilities);

那么最后如何在 v4 中做到这一点？我已经有很多代码使用@apply在基础层和组件层中定义的自定义类，现在在 v4 中它们生成Cannot apply unknown utility class。另一方面，我不想将基础层和组件定义为实用程序。

我见过类似的 Github 问题，但没有明显的解决方案。如果我使用，@reference我会得到@custom-variant cannot be nested.和@utility cannot be nested.。

https://github.com/tailwindlabs/tailwindcss/discussions/16429

https://github.com/tailwindlabs/tailwindcss/discussions/13336

您可以在这里看到我的样式代码：

https://github.com/nemanjam/nemanjam.github.io/tree/feat/tailwind4-v2/src/styles

css
Martin Hope
xkeshav
Asked: 2025-03-08 02:54:13 +0800 CST
  • 6

正在使用 html popover API和带有锚点定位的嵌套 css 声明。

我的要求是当弹出窗口打开时；如何将某些样式应用于具有属性的元素popover，表示为弹出窗口父元素

目前，当我们将鼠标悬停在此父元素上时，它会旋转，并且我希望当弹出窗口打开时，父元素应该保持在相同的位置，并且我们不应该与其交互，目前即使背景在那里，我们仍然可以将鼠标悬停在它上面。

尝试过::popover-open，但无法理解在嵌套的 css 模式中应该写什么

这是示例代码

.container__setting {
  container: setting/inline-size;
  .setting__trigger {
    anchor-name: --setting;
    position: fixed;
    top: 82px;
    right: 32px;
    width: max-content;
    height: auto;
    border-radius: 10%;
    background-color: unset;
    border: solid;
    cursor: pointer;
    display: flex;
    font-size: 4rem;
    transition: transform 330ms ease-in-out;
    &::after {
      content: '🕸';
    }
    
    &:hover {
      transform: scale(1.05) rotate(45deg);
    }
    
  }

  .setting__panel {
    position: fixed;
    position-anchor: --setting;
    top: calc(anchor(bottom) + 15px);
    right: calc(anchor(left) + 10px);
    justify-self: anchor-center;
    width: 20rem;
    height: 20rem;
    background-color: hwb(20 10% 40%);
    border-radius: 4px;
    padding: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: color(xyz, 0, 0, 1);
    &::backdrop {
      background-color: hsl(0 0% 10% / 0.5);
      backdrop-filter: blur(2px);
    }


    .control__group {
      display: grid;
      grid-auto-flow: row;
      gap: 0.5rem;

    /* Control Buttons */
    & button, & select {
      background-color: color(xyz 0.05 0.05 0.09);
      color: white;
      border: none;
      padding: 14px 24px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.01em;
      
      &:hover:not(.close) {
        background-color:  color(xyz 0.02 0.01 0.02);
        transform: translateY(-3px);
      }
      &.close {
        width: 2rem;
        height: 3rem;
        outline: 1px dashed green;
        justify-self: end;
        &:hover {
          font-size: 30px;
        }
      }
    }
  }
   & [popover] {
    position: fixed;
    inset: unset;
    width: fit-content;
    height: fit-content;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: auto;
    color: CanvasText;
    background-color: Canvas;
    padding: 1rem;
    border: solid;
    border-radius: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: translate 0.7s ease-out,
      display 0.7s ease-out allow-discrete,
      overlay 0.7s ease-out allow-discrete,
      height 0.5s ease-in-out;
    translate: 0 -2rem;


    &:popover-open {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      right: 40px;
      bottom: 0;
      translate: 0 0;
      height: 40px;
      @starting-style {
        opacity: 0;
        visibility: hidden;
      }
    }
  }


}
<div class="container__setting">
  <button class="setting__trigger" popovertarget="options" popovertargetaction="show"></button>
  <div class="setting__panel" id="options" popover="hint">
    <div class="control__group">
      <button id="close" class="close" popovertarget="options" popovertargetaction="hide">X</button>
      <button id="new" class="add">Add New </button>
      <button id="shuffle" class="shuffle"> Shuffle </button>
    </div>
  </div>
</div>

更新

按照建议尝试，它起作用了，但是在元素的嵌套块内写入不起作用；下面是工作示例（是的，语法也有点不同）。

    .container__setting {
      .setting_trigger {
        // some css properties
    
        // writing inside  does not work
      }
    
      // writing outside but inside parent selector works
      &:has([popover]:popover-open) .setting__trigger {
        background-color: blue;
        transform: scale(1.05) rotate(45deg);
      }
    }

另一种嵌套语法也可以按如下方式工作

.container__setting {
  &:has(:popover-open) {
     .setting__trigger {
        background-color: green;
        transform: scale(1.05) rotate(45deg);
      }
  }
}
css
Martin Hope
Alex
Asked: 2025-03-08 01:36:37 +0800 CST
  • 5

如何使section下面的元素可滚动并占据其父元素高度的 100％？

*{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
}

content{
  flex: 1 1 auto;
  display: flex:
  flex-direction: column;
}

content nav{
  background: green;
  flex: 0 0 auto;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  max-height: 100%; /* <- problem */
  
  p{
    flex: 0 0 auto;
  }
}

ul{
  flex: 1 1 auto;
  
  li{
     height: 200px;
  }
}
<main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

如果我在其上放置一个固定的像素高度，max-height: 200px它就会按预期工作（它会滚动），但是如何使该高度变量/填充父级的剩余高度？

css
Martin Hope
Marcos Carvalho
Asked: 2025-03-07 07:55:28 +0800 CST
  • 4

我想创建这种效果，让圆圈同时向左和向右扩展。我在另一篇文章的回答中看到了这个答案：https://stackoverflow.com/a/29922969

这是他们的答案中重现的代码：

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 300px;
}

<div class="logo"></div>

这正是我想要的效果，只不过它应该从中心扩展而不是从左到右扩展。

我尝试借助人工智能，但它甚至无法做到，只能根据提供的答案重现相同的效果，但不是从中心到左到右。

在此处输入图片描述

css
Martin Hope
user28751094
Asked: 2025-02-27 18:40:20 +0800 CST
  • 5

我有一个带有类名的 div，graph-container它具有以下属性：

.graph-container{
    width: 90%;
    height: 298px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

并且在该 div 中，除其他外，我还有另一个 div，其类graph-selector包含一个按钮列表：

.graph-selector{
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    width: 320px;
    margin-top: 46px;
    overflow-y: auto;
    overflow-x: hidden;
}

根据图表，按钮的数量可能很少，也可能很多，因此我设置了垂直溢出属性，以便在按钮超出容器 div 的大小时添加滚动条。但是，出于某种原因，这只会使按钮比其设置的高度更薄，以便能够挤进容器 div 而不出现任何滚动条，这……与我刚才问的正好相反？

css
Martin Hope
sh1
Asked: 2025-02-27 14:00:37 +0800 CST
  • 5

假设我已将 CSS 设置font-feature-settings为对我的页面主体有意义的某个值。

现在，我想在表格中添加该tnum功能，以确保所有数字都整齐对齐，以便于比较（避免“1111”看起来小于“999”的问题）。

有没有办法可以扩展 的值，font-feature-settings而不用去全局设置它的地方进行复制粘贴并进行修改？通过查询和编辑 CSS 中的继承值，或者类似方法？

css
Martin Hope
Symtox
Asked: 2025-02-26 21:15:29 +0800 CST
  • 5

我正在尝试使用 CSS 锚点（我知道它还在试验阶段，但仍在进行中）。我尝试将一个按钮锚定在侧边栏的右侧。侧边栏在关闭时会平移到屏幕外，在打开时会返回。我希望锚定在侧边栏上的按钮能够跟随侧边栏的走向，但我无法让它跟随平移。

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('aside').setAttribute("aria-expanded", "true");
  }
)
div {
  background: red;
  height: 200px;
}

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: 0;
  inset-block: 0;
  transition: all 1s;
  transform: translateX(100%);
  anchor-name: --anchor-name;
}

aside[aria-expanded="true"] {
  transform: translateX(0);
}

button {
  position: absolute;
  position-anchor: --anchor-name;
  right: anchor(--anchor-name left);
  top: 50%;
  transform: translateY(-50%);
}

body { margin: 0; }
<div>
  <aside></aside>
  <button >Expand</button>
</div>

我找不到任何描述该行为的资源，有没有什么办法可以让它工作？编辑：我正在使用 Chrome 130.0.6723.116

css