Jquery Стили и Цвета - PullRequest
Новая
       2

Jquery Стили и Цвета

0 голосов
/ 18 января 2020

Как я могу использовать Jquery для создания стилей для моих элементов? Мы должны составить таблицу и придать клеткам определенный фоновый цвет. Мне было интересно, могу ли я использовать метод addClass (). Я должен дать стили ячеек без использования css. Это не может быть сделано с помощью CSS, чтобы задать ячейки стилей таблицы. Это будет через 2 дня, поэтому я буду признателен за ответ как можно скорее. 

$(document).ready(function(){
  $("h1").mouseenter(function() {
$("#celery").addClass("apple ");   
 $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){                                                  
    $("th").css({"background-color": "red", "font-size": "200%"});  
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
     * {font-family: "Comic Sans MS", sans-serif;}
            table, th, td {
                border: 3px solid blue;
                border-collapse: collapse;
            }
            table {
                margin:auto;
            }
            td {
                width: 5%;
                padding: 10px;
                font-size: 10pt;
                text-align: center;
            }
            h1 {text-align: center}
       
        .celery {
           background-color:red
            
        }
        
        </style>
        
        
        <body class="siblings">
<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h1").mouseenter(function() {
$("#celery").addClass("apple ");   
 $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){                                                  
    $("th").css({"background-color": "red", "font-size": "200%"});  
  });



});

    </script>
</head>

<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
</body>
</html>

1 Ответ

0 голосов
/ 18 января 2020

Вы можете исправить это следующим образом 

$("th").mouseenter(function(){  
    $(this).css({"background-color": "red", "font-size": "200%"});  
  });
});

Проверьте демонстрацию ниже 

$(document).ready(function(){
  $("h1").mouseenter(function() {
      $("#celery").addClass("apple ");   
      $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){  
    $(this).css({"background-color": "red", "font-size": "200%"});  
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
     * {font-family: "Comic Sans MS", sans-serif;}
            table, th, td {
                border: 3px solid blue;
                border-collapse: collapse;
            }
            table {
                margin:auto;
            }
            td {
                width: 5%;
                padding: 10px;
                font-size: 10pt;
                text-align: center;
            }
            h1 {text-align: center}
       
        .celery {
           background-color:red
            
        }
        
        </style>
        
        
        <body class="siblings">
<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...