Question

我需要创建一个图像，用户可以通过单击图像来选择或取消选择记录。如果用户单击图像，则应选择该图像并以蓝色显示；如果用户再次单击该记录，则应取消选择该图像，并应以黑色显示。Black color indicates that it is unselected,Blue indicates selected

Answer 1

您不能使用CSS来做到这一点。

在单击图标时使用jQuery和toggleClass（我使用fontawesome图标）

function toggle(){
$( ".color-change" ).toggleClass( "blue" );
}

.blue{
color:blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


<i class="fas fa-retweet color-change" onclick="toggle()"></i>

使用JavaScript

function toggle(){
  var element = document.getElementsByClassName("color-change")[0];
  element.classList.toggle("blue");
}

    .blue{
    color:blue
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


    <i class="fas fa-retweet color-change" onclick="toggle()"></i>

要发表评论，请更改图片

function toggle(){
$( ".src-change" ).toggleClass( "far fa-unlink" );
}
function toggleSrc(){
$( ".change-img" ).toggleClass( "far fa-unlink" );
var src = $('.change-img').attr('src');
var newsrc = (src=='https://i.stack.imgur.com/mSXoO.png') ? 'https://i.stack.imgur.com/3mG2d.jpg' : 'https://i.stack.imgur.com/mSXoO.png';
$(".change-img").attr('src', newsrc );
}

.fa-unlink{
color:blue;
}
img{
width:100px;
height:100px;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<p>toggle class to change icon</p>
    <i class="fas fa-link src-change" onclick="toggle()"></i>
<p>toggle src of image to change icon</p>
<img src="https://i.stack.imgur.com/mSXoO.png" class="change-img" onclick="toggleSrc()"/>

Answer 2

.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

希望此代码对您有所帮助。

我已经触发了该图标的点击事件，方法是单击并添加和删除图标类名称（“ blueColor”）。对于“ blueColor” css样式，它将图标颜色变为蓝色。

Answer 3

使用javascript和css向其他用户尝试此文档

http://jsfiddle.net/JfGVE/2030/

我如何创建图像以使用CSS选择和取消选择

3 个答案: