控制父级别hover + 兄弟元素控制

改动点: 控制父级别hover + 兄弟元素控制

&:hover {
  .announcement-default-wrap{
    display: block;
    padding: 10px 23px;
    border-radius: 4px;

    .announcement-default-title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .announcement-default-content-wrap {
      font-size: 12px;
      line-height: normal;
      letter-spacing: normal;
      margin-top: 6px;
      word-wrap:break-word;
      white-space: pre-line;
    }
  }
  }
  &:hover{
    .announcement-show-wrap{
      &.announcement-icon-title{
        display: none;
      }
    }
  }
  .announcement-edit + .announcement-default-wrap {
    display: none;
  }
  .announcement-edit + .announcement-show-wrap {
    &.announcement-icon-title{
      display: none;
    }
  }

-------------------------源码--------------------------------

import React, { useState, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import CX from 'classnames'

import CancelButton from '../CancelButton'
import SmallButton from '../SmallButton'

import './index.less'

export default function ClassroomAnnouncement(props) {
  const {
    announcement, onSendAnnouncement, style, isEditable, theme,
  } = props

  const [announcementStatus, setAnnouncementStatus] = useState('normal')

  const inputElem = useRef(null)

  useEffect(() => {
    if (announcementStatus === 'edit') {
      inputElem.current.value = announcement
    }
  }, [announcement, announcementStatus])

  const handleEditAnnouncement = () => {
    setAnnouncementStatus('edit')
  }

  const handleCancelAnnouncementEdit = () => {
    setAnnouncementStatus('normal')
  }

  const handleSaveAnnouncement = () => {
    const elem = inputElem.current
    const inputString = _.trim(elem.value)
    onSendAnnouncement(inputString)
    elem.value = ''
    setAnnouncementStatus('normal')
  }

  const showNormalAnnouncement = (
    // 学生应该判断公告是否为空
    isEditable === false ? announcement !== '' : true
  )

  return (
    <div
      className={
        CX('announcement-wrap', {
          'announcement-wrap-normal': theme === 'normal',
          'announcement-wrap-dark': theme === 'dark',
          'announcement-fixed-height': showNormalAnnouncement,
        })
      }
      style={style}
    >
      {
        showNormalAnnouncement && announcementStatus !== 'edit' && (
        <div className="announcement-show-wrap announcement-icon-title">
          <i className="announcement-show-icon" />
          <span className="announcement-show-font">{announcement || '点击发布教室公告'}</span>
        </div>
        )
      }
      {
        announcementStatus === 'edit' && (
          <div className="announcement-edit">
            <div className="announcement-edit-header announcement-icon-title">
              <i className="announcement-edit-icon" />
              <span className="announcement-show-font">编辑教室公告</span>
            </div>
            <div className="announcement-edit-body">
              <textarea
                className="announcement-edit-textarea"
                placeholder="点击编辑公告信息"
                ref={inputElem}
                // defaultValue={announcement}
                maxLength="140"
              />
            </div>
            <div className="announcement-edit-footer">
              <SmallButton
                onClick={handleSaveAnnouncement}
                text="发 布"
                theme={theme}
              />
              <CancelButton
                onClick={handleCancelAnnouncementEdit}
                text="取 消"
                style={{
                  marginLeft: '24px',
                }}
                theme={theme}
              />
            </div>
          </div>
        )
      }
      {
        <div className="announcement-default-wrap">
          <div className="announcement-default-title-wrap">
            <div className="announcement-default-title-left announcement-icon-title">
              <i className="announcement-show-icon" />
              <span className="announcement-show-font">公告信息</span>
            </div>
            <div className="announcement-default-title-right">
              {
                  isEditable && (
                    <SmallButton
                      onClick={handleEditAnnouncement}
                      text="编 辑"
                      theme={theme}
                    />
                  )
                }
            </div>
          </div>
          <div className="announcement-default-content-wrap">
            <span>{announcement || '当前未设置公告信息'}</span>
          </div>
        </div>
      }
    </div>
  )
}

ClassroomAnnouncement.propTypes = {
  announcement: PropTypes.string,
  onSendAnnouncement: PropTypes.func.isRequired,
  style: PropTypes.object,
  isEditable: PropTypes.bool,
  theme: PropTypes.string,
}

ClassroomAnnouncement.defaultProps = {
  announcement: '',
  style: {},
  isEditable: true,
  theme: 'normal',
}

.announcement-wrap {
  width: 100%;
  box-sizing: border-box;
  z-index: 1;

  .announcement-show-wrap {
    padding: 12px 23px;
  }

  .announcement-icon-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: normal;
    letter-spacing: normal;

    .announcement-show-icon,.announcement-edit-icon {
      flex: 0 0 auto;
      width:15px;
      height: 15px;
    }

    .announcement-show-font {
      flex: 1 1 auto;
      margin-left:7px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .announcement-default-wrap {
    display: none;
  }
  &:hover {
  .announcement-default-wrap{
    display: block;
    padding: 10px 23px;
    border-radius: 4px;

    .announcement-default-title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .announcement-default-content-wrap {
      font-size: 12px;
      line-height: normal;
      letter-spacing: normal;
      margin-top: 6px;
      word-wrap:break-word;
      white-space: pre-line;
    }
  }
  }
  &:hover{
    .announcement-show-wrap{
      &.announcement-icon-title{
        display: none;
      }
    }
  }
  .announcement-edit + .announcement-default-wrap {
    display: none;
  }
  .announcement-edit + .announcement-show-wrap {
    &.announcement-icon-title{
      display: none;
    }
  }

  .announcement-edit{
    padding: 12px 17px;
    border-radius: 4px;
    .announcement-edit-header{
      color: #364152;
    }

    .announcement-edit-body{
      .announcement-edit-textarea{
        height: 120px;
        width: 100%;
        margin: 8px 0;
        padding: 13px;
        border-radius: 4px;
        outline: none;
        resize: none;
        opacity: 0.56;
        font-size: 12px;
        letter-spacing: normal;
        line-height: normal;
        box-sizing: border-box;
      }
    }
  }

  &.announcement-wrap-normal{
    .announcement-show-wrap{
      background: #fff;
    }

    .announcement-default-wrap{
      background: #fff;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

      .announcement-default-content-wrap{
        color: #364152;
      }
    }

    .announcement-icon-title{
      color: #6b9af9;

      .announcement-show-icon{
        background: url('~ROOT/shared/assets/image/icon-announcement-show-normal-51-45.png') no-repeat center center;
        background-size: 15px;
      }

      .announcement-edit-icon{
        background-image: url('~ROOT/shared/assets/image/icon-announcement-edit-normal-48-48.png');
        background-size: 15px;
      }
    }

    .announcement-edit{
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      background: #fff;
      .announcement-edit-textarea{
        border: solid 1px #f0f2f8;
        background-color: #ffffff;
        color: #364152;
      }
    }
  }

  /* 黑暗主题 */
  &.announcement-wrap-dark{
    padding: 0 12px;

    .announcement-show-wrap{
      background: transparent;
      padding: 12px;
    }

    .announcement-icon-title{
      color: #ffffff;

      .announcement-show-icon{
        background: url('~ROOT/shared/assets/image/icon-announcement-show-normal-dark-51-45.png') no-repeat center center;
        background-size: 15px;
      }

      .announcement-edit-icon{
        background-image: url('~ROOT/shared/assets/image/icon-announcement-edit-normal-dark-48-48.png');
        background-size: 15px;
      }

      .announcement-show-font{
        opacity: 0.6;
      }
    }

    .announcement-default-wrap{
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
      border: solid 1px #ffffff;
      background-color: #5e6775;
      padding: 10px 12px;

      .announcement-default-content-wrap{
        color: #ffffff;
      }
    }

    .announcement-edit{
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
      border: solid 1px #ffffff;
      background: #5e6775;
      padding: 12px;
      .announcement-edit-textarea{
        border: solid 0.5px rgba(255, 255, 255, 0.6);
        background-color: rgba(216, 216, 216, 0);
        color: #ffffff;
        opacity: 1;

        &::placeholder{
          color: #ffffff;
        }
      }
    }
  }

  &.announcement-fixed-height{
    height: 41px;
  }
}

.screen-share-layout-component-wrap .announcement-wrap{
  pointer-events: all;
}