CSS: Парение один элемент, эффект для нескольких элементов?

Это - хорошее осуществление для себя, чтобы продолжить работать:)

необходимо повредить библиотеку в три части

  • Загрузка файла CSV
  • Представление файла в памяти так, чтобы можно было изменить его и считать его
  • Сохранение на диск файла CSV назад, Таким образом, Вы смотрите на запись класса CSVDocument, который содержит:

    • Загрузка (символ константы* файл);
    • Сохраняют (символ константы* файл);
    • GetBody

    Так, чтобы можно было пользоваться библиотекой как это:

    CSVDocument doc;
    doc.Load("file.csv");
    CSVDocumentBody* body = doc.GetBody();
    
    CSVDocumentRow* header = body->GetRow(0);
    for (int i = 0; i < header->GetFieldCount(); i++)
    {
        CSVDocumentField* col = header->GetField(i);
        cout << col->GetText() << "\t";
    }
    
    for (int i = 1; i < body->GetRowCount(); i++) // i = 1 so we skip the header
    {
        CSVDocumentRow* row = body->GetRow(i);
        for (int p = 0; p < row->GetFieldCount(); p++)
        {
            cout << row->GetField(p)->GetText() << "\t";
        }
        cout << "\n";
    }
    
    body->GetRecord(10)->SetText("hello world");
    
    CSVDocumentRow* lastRow = body->AddRow();
    lastRow->AddField()->SetText("Hey there");
    lastRow->AddField()->SetText("Hey there column 2");
    
    doc->Save("file.csv");
    

    , Который дает нам следующие интерфейсы:

    class CSVDocument
    {
    public:
        void Load(const char* file);
        void Save(const char* file);
    
        CSVDocumentBody* GetBody();
    };
    
    class CSVDocumentBody
    {
    public:
        int GetRowCount();
        CSVDocumentRow* GetRow(int index);
        CSVDocumentRow* AddRow();
    };
    
    class CSVDocumentRow
    {
    public:
        int GetFieldCount();
        CSVDocumentField* GetField(int index);
        CSVDocumentField* AddField(int index);
    };
    
    class CSVDocumentField
    {
    public:
        const char* GetText();
        void GetText(const char* text);
    };
    

    Теперь просто необходимо восполнить пробелы отсюда:)

    Верят мне, когда я говорю это - инвестирование Вашего времени в изучение, как сделать библиотеки, особенно те, которые имеют дело с загрузкой, управлением и сохранением данных, не только удалю Вашу зависимость от существования таких библиотек, но также сделаю Вас всесторонним лучшим программистом.

    :)

    РЕДАКТИРОВАНИЕ

    я не знаю, сколько Вы уже знаете об обработке строк и парсинге; таким образом, если Вы застреваете, я был бы рад помочь.

76
задан ag93 14 September 2019 в 09:12
поделиться

5 ответов

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

    
Lorem Ipsum
179
ответ дан 24 November 2019 в 11:08
поделиться

This worked for me in Firefox and Chrome and IE8...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

... you may want to test this with IE6 as well (I'm not sure if it'll work there).

11
ответ дан 24 November 2019 в 11:08
поделиться

I think the best option for you is to enclose both divs by another div. Then you can make it by CSS in the following way:

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>
10
ответ дан 24 November 2019 в 11:08
поделиться

This is not difficult to achieve, but you need to use the javascript onmouseover function. Pseudoscript:

<div class="section ">

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

Use your own colors. You can also reference javascript functions in the mouseover command.

8
ответ дан 24 November 2019 в 11:08
поделиться

Думаю, для этого вам понадобится JavaScript.

jQuery:

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

Отрегулируйте значения и идентификаторы элементов соответственно :)

3
ответ дан 24 November 2019 в 11:08
поделиться
Другие вопросы по тегам:

Похожие вопросы: