Question

我试图让Lay主题（wordpress）的页面上某些文本的RGB值由鼠标的位置确定。我目前正在努力更改背景颜色（请参见下文），但希望它更改文本颜色。理想情况下，所有文本的颜色都可以，但是我可以单独进行。

也可以根据鼠标在屏幕上而不是页面上的位置使用它。

谢谢

<script>
    ( function( $ ) {
        'use strict';
        $( document ).on( 'ready', function() {
        $(document).mousemove(function(e){
        var $width = ($(document).width())/255;
        var $height = ($(document).height())/255;
        var $pageX = parseInt(e.pageX / $width,10);
        var $pageY = parseInt(e.pageY / $height,10);
        var $pageXY = ($pageX+$pageY)/2;
        $("body").css("background-colour", "rgb("+$pageY+","+$pageXY+",255)");
        });
        } );
    } ( jQuery ) );
</script>

Answer 1

来自here，“ color属性用于设置文本的颜色。颜色通过以下方式指定：

颜色名称-如“红色”
十六进制值-例如“＃ff0000”
一个RGB值-例如“ rgb（255,0,0）”

”。尝试以下操作：

$("body").css("color", "rgb("+$pageY+","+$pageXY+",255)");

如果文本元素（div或其他元素）具有带有color属性的类，则样式将不会层叠到文本。您应该选择文本元素而不是body。

我试过了，它有效：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head/>
<body>
    <div id='textId' style='color: red'>
    	text
    </div>
    <div id='button' style="height: 300px;width: 200px; background-color: red;"></div>
    <script>
    	document.getElementById('button').addEventListener('click', () => {
    	    $("#textId").css("color", "rgb(255,55,255)");
    	});
    </script>

<body/>
</html>

如何使用鼠标位置确定文本颜色

1 个答案: