我可以根据一个PHP条件在CSS中设置一个悬停动画吗？

时间：2019-11-07 作者：aubsauce

我在WP仪表板中创建了“亮”主题和“暗”主题（通过高级自定义字段），这将决定一系列按钮的外观，具体取决于选择的主题：

                <?php 
                $learn_more = get_field(\'learn_more_button\');

                if( $learn_more == \'Light\' ) {
                    $btn_background = \'#E0EFF8\';
                    $btn_text = \'#007BC1\';
                    $back_btn_link = \'#E0EFF8\';

                } else {
                    $btn_background = \'#007BC1\';
                    $btn_text = \'#E0EFF8\';
                    $back_btn_link = \'#0C4F70\';
                }
                ?>
到目前为止，这两个主题的文本和背景色都能正确渲染：

<div class="layout center"><a style="background-color:<?php echo $btn_background ?>; color:<?php echo $btn_text ?>" class="button coe-button" href="<?php echo get_field(\'coe_external_link\'); ?>" target="_blank">Learn More</a></div>
。。。但我还想在按钮上设置悬停动画，当悬停在上时，将反转文本和背景色（无论它们是什么）：

使用以下CSS，只有“亮”主题的按钮才能完成动画，而“暗”主题的按钮什么都不做：

<style>
.coe-button:hover {
    color:<?php echo $btn_background ?>!important;
    background-color:<?php echo $btn_text ?>!important;
}    
</style>
有没有办法做到这一点？不确定我是否做错了什么，或者这只是语言的限制，但我可以使用一些指导。谢谢

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

不，不是那样的，悬停是在PHP生成页面并关闭很久之后，在浏览器中发生的事情。

从根本上讲，您需要采取一种更基于CSS的不同方法。与其在PHP中提供手动控制颜色的静态样式，不如只跟踪颜色是暗还是亮，并基于该值指定HTML类。然后，所有样式都可以用CSS编写，并且可以使用悬停伪类。

E、 g:

$style = get_field( \'learn_more_button_style\' );
$url = get_field( \'coe_external_link\' );
?>
<div class="layout center <?php echo esc_attr( \'style-\'.$style ); ?>">
  <a class="button coe-button" href="<?php echo esc_url( $url ); ?>" target="_blank">Learn More</a>
</div>
注意，我做了几件事：

我在一个地方提取了所有字段，不要混合显示和检索数据，这会使内容更难阅读，代码更难看，并导致后续问题。例如，如果我们需要检查URL字段的值，该怎么办？我们需要在HTML中处理内联条件和三元运算符，但不是这样，我们有一个很好的地方，我们可以干净地处理它，我们的HTML看起来一样esc_url, 出于安全原因，总是在输出时转义我将字段重命名为learn_more_button_style. 通过使用_style 我消除了关于什么风格的任何假设，所以你可以选择浅色、深色、爵士色、霓虹色、柔和、高对比度等style- 同学们，现在你们将看到style-light, 您可以将其与CSS一起使用，所有内联样式属性都消失了，它们不是必需的。通过这种方式，您可以将按钮设置为如下样式：

.style-light .button {
  background: white;
  border: 1px solid black;
  color: black;
}

.style-dark .button {
  background: black;
  border: 1px solid white;
  color: white;
}
.style-light .button:hover {
  background: black;
  border: 1px solid white;
  color: white;
}

.style-dark .button:hover {
  background: white;
  border: 1px solid black;
  color: black;
}
此时，它变成了一个纯粹的CSS前端问题，您不需要任何PHP或WordPress知识来进一步设计按钮的样式

标签： php   css   advanced-custom-fields   conditional-content   小码农  

相关推荐

如何在WordPress/PHP中检索所有帖子的自定义字段类型？

我有一个帖子类型absf-episodes 从URL复制/wp-admin/edit.php?post_type=absf-episodes我为帖子类型设置的自定义字段absf-episodes 是：broadview_updated, description_en, description_fr, description_short_en, description_short_fr, episode_id, title_short_en, title_short_fr 我有一个函数，我想在其中